■■ft IT. I* RT. F^*. F^T P^*. .I.,., hy. ff. hy,,i,i, l f^,i,i,,f!Tiii.i.f^*.ii,
(930 x 425)
-tO*« CAILERY1 GALLERY? CALLERV3 GALLEHV4 BIO RESOURCE I
port*ofc> ban rati P 150% [£ay*?f 1. RGI
JASPER JOHAL P H O T O G R
m <p
T t*
DO-
OURSEL
Web
Learn to:
• Secure a domain name and plan the
perfect site from start to finish
• Customize the templates included
with the book to create professional-
looking Web sites
• Design a blog, add video and Flash®,
and do it all yourself!
A L
T O
2nd Edition
A P H Y
Janine Warner
Bestselling author of Dreamweaver For Dummies
Jasper Johal <®201Q
Get More and Do More at Dummies.com®
Start with FREE Cheat Sheets
Cheat Sheets include
• Checklists
• Charts
• Common Instructions
• And Other Good Stuff!
To access the Cheat Sheet created specifically for this book, go to
www.dummies.com/cheatsheet/websitesdiy
DropBoo
Get Smart at Dummies.com
Dummies.com makes your life easier with 1 ,000s
of answers on everything from removing wallpaper
to using the latest version of Windows.
Checkout our
•Videos
• Illustrated Articles
• Step-by-Step Instructions
Plus, each month you can win valuable prizes by entering
our Dummies.com sweepstakes.
Want a weekly dose of Dummies? Sign up for Newsletters oi
• Digital Photography
• Microsoft Windows & Office
• Personal Finance & Investing
•Health& Wellness
• Computing, iPods & Cell Phones
• eBay
• Internet
• Food, Home & Garden
Find out "HOW" at Dummies.com
^Sweepstakes not currently available in all countries; visit Dummies.com for official rules.
DropBg
-IT-YOURSELF
Web Sites
by Janine Warner
WILEY
Wiley Publishing, Inc.
Web Sites Do-It-Yourself For Dummies®, 2nd Edition
Published by
Wiley Publishing, Inc.
Ill River Street
I7(m-5|7i
WW
opyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means,
electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of
the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through
payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978)
750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department,
John Wiley & Sons, Inc., 1 1 1 River Street, Hoboken, NJ 07030, (201) 748-601 1, fax (201) 748-6008, or online at http://www.wiley.
com/go/permissions.
Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The
Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress are
trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries,
and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley
Publishing, Inc., is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY : THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS
OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND
SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PAR-
TICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE
ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD
WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER
PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFES-
SIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAM-
AGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A
CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE
PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS
IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE
CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at
877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.
For technical support, please visit www. wiley . com/ techsupport.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in
electronic books.
Library of Congress Control Number: 2009940287
ISBN: 978-0-470-56520-9
Manufactured in the United States of America
10 987654321
®
WILEY
About the Author
DropBQ®
Since|1996, Janine Warner has authored more than a dozen books about the Internet, includ-
ition oi Dreamweaver For Dummies, Creating Family Web Sites For Dummies, and
itions of Teach Yourself Dreamweaver Visually.
She's also the host of a series of training videos about Web design for Total Training, includ-
ing programs on Adobe Dreamweaver and Microsoft Expression Web. Highlights of her videos
are featured on both the Microsoft and Adobe Web sites.
An award-winning journalist, her articles and columns have appeared in a variety of publica-
tions, including The Miami Herald, Shape Magazine, and the Pulitzer Prize-winning Point Reyes
Light newspaper. She is also a regular columnist for Layers Magazine.
Janine has been a part-time faculty member at both the University of Miami and the University
of Southern California Annenberg School for Communication. She has also developed online
training programs for the Western Knight Center, a joint project of USC and UC Berkeley
funded by the Knight Foundation.
Janine has extensive Internet experience working on large and small Web sites. From 1994 to
1998, she ran Visiontec Communications, a Web design business in Northern California, where
she worked for a diverse group of clients including Levi Strauss & Co., AirTouch International,
Beth's Desserts, and many other small and medium-size businesses.
In 1998, she joined The Miami Herald as their Online Managing Editor. A year later, she was
promoted to Director of New Media and managed a team of designers, programmers, journal-
ists, and marketing staff who produced the Web sites for The Miami Herald, El Nuevo Herald,
and Miami.com. She left that position to serve as Director of Latin American Operations for
CNET Networks, an international technology media company.
Since 2001, Janine has run her own business as a writer, speaker, and consultant. She is a
popular speaker at conferences and events throughout the United States, and her fluency in
Spanish has led to many speaking engagements in Latin America and Spain. She served as a
judge for the Arroba de Oro Latin American Internet awards from 2001 to 2005. As part of that
project, she helped to create an Internet literacy program for students in Central America
called Operacion Red (Operation Network).
Janine earned a degree in journalism and Spanish from the University of Massachusetts,
Amherst, and spent the first several years of her career in Northern California as a reporter
and editor.
She lives with her husband in Los Angeles.
Dedication
I lovateaching Web design because it's so much fun to see all the great Web sites people
e|tltf fiSlicate this book to everyone who aspires to share their ideas, stories, views,
prrotosr^t^iness products and services on the Internet. Don't ever fear that Web design is too
hard. You can do this, you can create your own Web site. In this book you find everything you
need to create, design, publish, and promote your own Web site. I wish you all the best with
your Web designs!
Author's Acknowledgments
More than anyone, I want to thank my husband, David LaFontaine, for his patience, love,
delightful sense of humor, and all his help in the research and production of this book. Among
his many contributions, he authored Chapters 1, 11, and 12. Dave, your intelligence and cre-
ativity inspire me, and your love brings me more joy than I could have imagined.
Thanks to my dear friend and mentor David Mitchell who helped me get started in my writing
career many moons ago when he served as publisher of the Point Reyes Light newspaper.
Thanks to all four of my fabulous parents, Malinda, Janice, Helen, and Robin, for your love,
support, and encouragement. Thanks to my brothers Brian and Kevin, and to Kevin's delight-
ful wife Stephanie, and their amazing children Mikayla, Savannah, Jessica, and Calahan (you'll
find their photos in the sample site in the Family Web sites chapter). Thanks also to all my
extended family, which now includes David's large and wonderful collection of relatives,
including Gail, Dave, Linda, Mark, Beth, Sarah, and everyone else in the LaFontaine, Roos, and
other clans. Thanks to Jeff Noble for his contributions to Chapter 10 and for his careful tech
editing and testing of all the lessons in this book. Thanks to the entire editorial team at Wiley
Publishing, especially my acquisitions editor Bob Woerner, my development editor Becky
Huehls, and everyone who helped to edit, produce, and develop this book.
And finally, let me thank my lucky stars that this book is finally done. Complete. Finished.
That's it. (And don't even tell me those aren't complete sentences.)
Publisher's Acknowledgments
We're proud of this book; please send us your comments at http : / /dummies . custhelp . com. For other comments, please
contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.
lped bring this book to market include the following:
vcquisitions and Editorial
Project Editor: Rebecca Huehls
Executive Editor: Bob Woerner
Sr. Copy Editor: Teresa Artman
Technical Editor: Jeff Noble
Editorial Manager: Leah P. Cameron
Editorial Assistant: Amanda Graham
Sr. Editorial Assistant: Cherie Case
Cartoons: Rich Tennant (www. theSthwave . com)
Composition Services
Project Coordinator: Patrick Redmond
Layout and Graphics: Carrie A. Cesavice,
Jennifer Henry, Erin Zeltner
Special Art: istockphoto.com
Proofreaders: Joanne Keaton
Indexer: BIM Indexing & Proofreading Services
Special Help: Jennifer Riggs
Publishing and Editorial for Technology Dummies
Richard Swadley, Vice President and Executive Group Publisher
Andy Cummings, Vice President and Publisher
Mary Bednarek, Executive Acquisitions Director
Mary C. Corder, Editorial Director
Publishing for Consumer Dummies
Diane Graves Steele, Vice President and Publisher
Composition Services
Debbie Stailey, Director of Composition Services
Contents at a Glance
I introauction . ....... ...... ............ ............ .......... ................................ /
Parth Laying the ^www^^....................................................^
Chapter 1: Exploring the Best Ways to Create Web Sites 7
Chapter 2: Planning Makes Web Design Easier 21
Chapter 3: Securing a Domain Name and Web Host 35
Chapter 4: Understanding Web Design 47
Part 11: Putting the Pages Together................................^
Chapter 5: Editing and Creating Web Graphics 69
Chapter 6: Getting Started with Dreamweaver 95
Chapter 7: Creating a Profile or Portfolio Site 129
Chapter 8: Creating a Business Web Site 155
Chapter 9: Creating a Family, Vacation, or Hobby Site 179
Chapter 10: Testing and Publishing a Web Site 197
Part 111: Cwnuj Web 2.0 221
Chapter 11: Designing a Blog 223
Chapter 12: Podcasting Your Own Show 243
Chapter 13: Multimedia: Adding Flash, Audio, and Video 257
Chapter 14: Making Money with Your Site 275
Part IV: The Part of fe«5.......................................................... 295
Chapter 15: Ten Cool Services for Your Site 297
Chapter 16: Ten Ways to Promote Your Site 303
Jw^r ...... . ....... ...... ....... ....... ......
Table of Contents
DropBopks
introduction...................................^^
About This Book 1
About the Templates and Web Site for this Book 2
Conventions Used in This Book 2
Foolish Assumptions 3
How This Book Is Organized 3
Part I: Laying the Groundwork 3
Part II: Putting the Pages Together 4
Part III: Going Web 2.0 4
Part IV: The Part of Tens 4
Icons Used in This Book 4
Parth Layinq the Groundwork ...... ...... ............ ...... ........................5
Chapter 1 : Exploring the Best Ways to Create Web Sites 7
Checking Out Examples of Success on the Web 8
Creating Web Sites with the Templates in This Book 10
Comparing Web Design Options 13
Static Web pages 14
Dynamic Web pages 14
Multimedia: You like to move it-move it 16
Working with Different Kinds of Templates 16
What kind of templates should you use? 17
Reviewing Web Design and Graphics Programs 18
Comparing Web design programs 18
Comparing image editing programs 20
Chapter 2: Planning Makes Web Design Easier 21
Developing a Project Plan 22
Defining goals and objectives 22
Creating a content list 24
Creating a task list 25
Setting a timeline 26
Establishing a budget 27
Assembling a team 29
Designing Your Web Site 29
Creating a consistent design 30
Mapping the structure: Organization, navigation, and links 31
Designing the home page and main sections 31
Setting up navigation links 32
Web Sites Do-It- Yourself For Dummies
Chapter 3: Securing a Domain Name and Web Host 35
Finding and Registering Domain Names 35
Choosing a good domain name 36
^ I I 1^ ^Searching for an available domain name 38
Ij I 1 \J \J |^^Jiderstanding top-level domains 39
I Comparing country domains: .tv, .us, and .ws 40
Registering your domain name 40
Choosing a Web Hosting Service 42
Finding the best host for your site 43
Setting up e-commerce service 45
Hosting multiple sites with different domain names 45
Chapter 4: Understanding Web Design 47
HTM-what? Exploring HTML and XHTML 47
Comparing Tables, Frames, and Layers 50
Creating page designs with HTML Tables 51
Considering design options with HTML frames 52
Using Layers (or AP Divs) to create designs 53
Designing with Cascading Style Sheets 54
Appreciating the advantages of CSS 54
Combining CSS and XHTML 56
Creating page layouts with CSS and XHTML 57
Understanding style selectors 58
Understanding rule definition options 62
Looking at the code behind the scenes 65
Part 11: Putting the Pages Together.............................................. 67
Chapter 5: Editing and Creating Web Graphics 69
Introducing Photoshop Elements 69
The Toolbox 70
The Options bar 72
The menu bar 73
The panels 73
Cropping an Image 75
Resizing an Image 77
Optimizing Photos as JPEGs 79
Optimizing Graphics in GIF or PNG Format 82
Combining Photos and Text in a New Image 85
Editing Images with Multiple Layers 91
Chapter 6: Getting Started with Dreamweaver 95
Setting Up a New or Existing Site 95
Defining a Web Site in Dreamweaver 97
Creating New Pages in Dreamweaver 101
Inserting Images in Dreamweaver 107
Setting Links to Other Pages in Your Site 110
Linking to Another Web Site 112
Setting a Link to an E-Mail Address 113
Changing Page-Wide Settings with Page Properties 115
Table of Contents
Defining New Styles in Dreamweaver 118
Creating and Using Templates 121
Adding Meta Tags for Search Engines 126
^ Inserting Code into a Web Page in Dreamweaver 127
[J DljfcljJ^Bbreating a Profile or Portfolio Site 129
Starting with Profile or Portfolio Templates 130
Introducing the profile template 130
Creating a multipage portfolio site 131
Customizing Banner Graphics 134
Designing a Winning Online Profile 138
Customizing the Portfolio Home Page 145
Creating and Linking Pages using the Gallery Templates 150
Chapter 8: Creating a Business Web Site 155
Introducing the Business Site Templates 155
Editing and Sizing Images for the Template 159
Putting the Pages Together in Dreamweaver 165
Creating and Editing Pages with a Web Template in Dreamweaver 171
Using Background Images in Page Layouts 1 75
Chapter 9: Creating a Family, Vacation, or Hobby Site 179
Getting Started with the Family or Group Site Templates 1 79
Editing Starter Image Templates 182
Designing a Web Site for the Entire Family 189
Creating and Linking New Pages 192
Chapter 10: Testing and Publishing a Web Site 197
Understanding How Web Pages Look on Different Computers 198
Understanding How Browsers Affect a Site's Appearance 200
Previewing Web Pages in Multiple Browsers 201
Testing Sites with Online Browser Emulators 204
Using the Dreamweaver Link-Testing Features 207
Setting Up FTP in Dreamweaver 209
Uploading Files with the Dreamweaver FTP Features 213
Adding Google Analytics to your Site 217
Part 111: Goinq Web 2.^............................................................ 22/
Chapter 11: Designing a Blog 223
Starting a Blog at WordPress.com 224
Customizing Your Blog Template 230
Posting to Your Blog 236
Chapter 12: Podcasting Your Own Show 243
Preparing a Podcast 244
Recording a Podcast 246
Editing a Recording 250
Publishing a Podcast 255
r/ Web Sites Do-It- Yourself For Dummies
Chapter 13: Multimedia: Adding Flash, Audio, and Video 257
Playing Animation and Video on the Web 257
Working with Adobe Flash 259
^ I 1 /"vlJs^rteg a Flash Animation File into a Web Page 260
[j I 1 \J ^Jcpj^Jing and Optimizing Flash Video 264
\ Adding Flash Video to Your Site 268
Uploading Videos to YouTube, Vimeo, and Other Sites 272
Chapter 14: Making Money with Your Site 275
Adding Advertisers with Google AdSense 276
Signing Up with Affiliate Programs 282
Adding a PayPal Button 288
Part IV: The Part of Tens.........................^^ 295
Chapter 15: Ten Cool Services for Your Site 297
Measuring Traffic from Web Visitors 297
Creating and Managing E-mail Newsletters 298
Downloading Professional Images Inexpensively 299
Highlighting Links with Pop-Up Previews 300
WhatTheFont? (An Online Matchmaker) 300
Surveying Your Visitors 301
Dressing Up the Address Bar with a Favicon 301
Protecting Your E-Mail Address from Spammers 301
Setting Up Free Conference Calls 302
Sharing PowerPoint Presentations 302
Chapter 16: Ten Ways to Promote Your Site 303
Scoring High in Search Engines 303
Buying Traffic (Yes, You Really Can!) 305
Using Social Networking Sites for Promotion 306
Getting Ranked on Social Bookmarking Sites 307
Enticing Visitors to Return for Updates 307
Gathering Ideas from Other Web Sites 307
Marketing a Web Site to the Media 308
Unleashing the Power of Viral Marketing 308
Blogging, Blogging, Blogging 309
Using Twitter to Promote Your Site 309
Telling Everyone You Know 309
Index
Introduction
DropBooks
f you're feeling left out of the mad scramble to establish a presence on the
Internet, relax — you're not alone. And it's not too late.
Despite the hype, many small businesses, clubs, and families still don't have Web
sites. And, even if you already have a site, you're not alone if you're still trying to
figure out how to make it better or more profitable, or you've come to the realiza-
tion that it's time to redesign.
These days, it seems that every TV commercial, movie trailer, magazine insert, and
grocery store bulletin board warns that any serious business owner needs to have
a Web site, and most families, clubs, and even pet snakes do, too.
Although that's increasingly true, building a presence on the Internet isn't some-
thing you should do just because everyone else is doing it, and it isn't all bad if
you've waited this long to make the Web a priority. Too many people have raced to
put up Web sites without taking the time to consider how the Web fits in with their
other goals and how they can best take advantage of what the Web has to offer.
If you've waited until now, you may even be better off because the Internet has
matured, its audience has matured (it isn't populated solely by teenagers and aca-
demics anymore), and building a Web site has become easier than ever. If you're
ready for a redesign of your first site, you have the advantage of being able to ben-
efit from your own and everyone else's mistakes.
About This Book
This book is designed to help you progress through the entire process of creating a
site, from registering a domain name, to creating a compelling design, to attracting
just the right audience.
But you don't have to read this book from cover to cover, and you certainly don't
have to memorize it. Web Sites Do-It-Yourself For Dummies was written to help you
find the answers you need when you need them. Consider this book a quick guide
and a reference you can return to. Each part stands alone, giving you easy answers
to specific questions and step-by-step instructions for common tasks. If you want
to find out how to choose a hosting service, optimize images, or add video to your
site, just jump right in and go directly to the section that most interests you. And
don't worry about spilling coffee on the pages if you bring the book to breakfast —
I promise it won't complain!
I designed this book using what I consider the best technologies for someone who
wants to create their own, custom Web site. If you picked up this book, I assume
that you're not an advanced programmer and that you don't want to hire a team of
expensive Web consultants. You want to do it yourself.
2 Web Sites Do-It- Yourself For Dummies, 2nd Edition
DropBo
To help you create the best site you can without your having to invest a million dol-
lars, or a million hours, I based the step-by-step tasks in each chapter on the tech-
nologies that I think offer all the features you need yet are relatively easy to figure
out |vith a little guidance. For images, you find instructions for using Photoshop
^a popular and competitively priced image program that you can use to
;e^l^t, and optimize images so that they download quickly. If you already
have Adobe Photoshop, you can use that program instead; the instructions work
for both programs. For the pages of your site, you find step-by-step instructions
for Adobe Dreamweaver, as well as a variety of templates you can download for
free to go along with this book so you can create a professionally designed Web
site quickly. If you want to use other programs or services, you find alternatives
in handy sidebars near the relevant step-by-step tasks. For example, if you want to
use Microsoft Expression Web instead of Adobe Dreamweaver, no problem, you'll
find templates on the companion Web site that will work with both programs and
instructions for using both.
About the Templates and Web Site
for this Book
To help you get the most from this book, I created a special section at my Digital
Family Web site with files and templates you can download and use as you follow
along with the step-by-step tasks. You also find a FAQ (frequently asked questions),
links, additional resources, and updates. To get all these goodies, just enter the fol-
lowing address in your Web browser:
www. digital family. com/diy
You need a password to get into this protected site, but if you have this book with
you when you log on, you have everything you need to answer a simple question on
the Web site and gain access right away.
After you are authorized to enter the Web site, you'll find instructions for down-
loading the images and templates, which give you a head start in creating a full-
fledged site of your own. Along with this book, you get a collection of templates
designed to create an online profile, an artist portfolio, a business site, and a family
or hobby site. And, you can customize the look and feel of all these templates to
use them to create any type of site for your corner of the Web.
Throughout this book, you find references to the Web site and the templates and
other goodies that go with the step-by-step tasks.
Contentions Used in This Book
Keeping things consistent makes them easier to understand. In this book, those
consistent elements are conventions. Notice how the word conventions is in italics?
That's a convention I use frequently. I put new terms in italics and then define them
so that you know what they mean.
Introduction
When I type URLs (Web addresses) or e-mail addresses within regular paragraph
text, they look like this: www. j cwarner . com. Sometimes, however, I set off a URL
on its own line, like this:
That's so you can easily spot URLs on a page if you want to type them into your
browser to visit a site. I also assume that your Web browser doesn't require the
introductory http : / / for Web addresses. If you use an older browser, remember
to type this part before the address. (Also make sure to include that part of the
address when you're creating links.)
Even though programs like Dreamweaver make knowing the HTML code unneces-
sary, you may want to wade into the HTML waters occasionally. When I include
HTML, such as the following code to link a URL to a Web page, I set off the HTML in
the same monofont type as I use for URLs:
<A HREF= "http :/ /www. j cwarner . com" >Janine ' s Web Site</A>
When I introduce you to a new set of features, such as options in a dialog box, I set
these items apart with bullets so that you can see that they're all related. When I want
you to follow instructions, I use numbered steps to walk you through the process.
Although this book is designed to help you create a professional-looking Web site,
I don't assume that you're a pro — at least not yet. In keeping with the philosophy
behind the For Dummies series, this easy-to-use guide is designed for readers with
a wide range of experience. Being interested in Web design and wanting to create a
Web site is the key, but that desire is all I expect from you.
To ease you through the learning curve associated with any new program, I orga-
nized Web Sites Do-It-Yourself For Dummies, 2nd Edition, to be a complete reference.
This section provides a breakdown of the four parts of the book and what you can
find in each one.
Part I gets you started in creating a Web site and helps you lay a solid foundation
for your site. In Chapter 1, 1 introduce you to the many ways you can create a Web
site to help you find the best template, technology, and software you'll need for
your project. In Chapter 2, 1 walk you through the planning process, which can
save you a lot of time in the long run. In Chapter 3, you find out how to register a
domain name, and I give you tips for selecting the best Web server hosting service.
And then in Chapter 4, 1 introduce you to just enough Web technologies, including
HTML, CSS to give you a head start on your Web site.
Foolish
Assumptions
How
This Book Is Organized
Part 1: Laqinq the Groundwork
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Part 11: Putting the Pages Together
DropBoal
vou
In Chapter 5, 1 move on to graphics, with an introduction to creating graphics for
n overview of the differences in formats (GIF, JPEG, and PNG files), and a
f tips for optimizing images so that they download quickly. In Chapter 6,
you find an introduction to Dreamweaver, and in Chapters 7, 8, and 9, you get step-
by-step instructions for personalizing the many templates that come with this book.
In Chapter 10, you discover the Dreamweaver testing and publishing features so
that you can publish your pages to the Internet as soon as you're ready.
Part 111: Goinq Web 2. 0
In Part III, I go beyond basic Web design, by giving you instructions for creating
a blog in Chapter 11 and for recording and publishing a podcast in Chapter 12. In
Chapter 13, you find a review of the many audio, video, and animation formats and
instructions for how to add multimedia to your Web site. In Chapter 14, 1 "show you
the money" with instructions for including advertising and affiliates on your pages
as well as for adding e-commerce options to sell products and services.
Part IV: The Part of Tens
Chapter 15 includes ten cool Web services that can help you add advanced features
to your site without having to know how to program. Finally, Chapter 16 features
ten ways to promote your site, because after you do all the work of creating an out-
standing Web site, you want to make sure to attract a good audience.
Icons Used in This Book
This icon reminds you of an important concept or procedure that you should store
away in your memory banks for later use.
This icon indicates a tip or technique that can save you time and money — and
headaches — later.
This icon warns you of any potential pitfalls — and gives you the all-important infor-
mation on how to avoid them.
Parti
DropBooks Laying the
Groundwork
The 5 th Wave By Rich Tennant
DropBooks
Chapter 1
DropBookf xploring the Best Ways
to Create Web Sites
In This Chapter
^ Checking out Web site success stories
Creating Web sites with templates
Exploring Web design options
► Choosing the best Web design program
Comparing graphics and image-editing programs
■ reating a Web site can open doors for you that you never knew existed.
Every day, thousands more people connect to the Web for the first time,
and those who are already online get more adept at using online tools and services.
The effect of all these people reaching out to each other to play, laugh, argue, buy,
sell, trade, collaborate, invent, experiment, research, learn, and just chat about the
mundane details of what constitutes a perfect cup of coffee — are transforming the
world.
Thanks to the ever-simpler, easier, and less expensive Web technologies that you
discover in this book, you can create a Web site today that just a few years ago
would have required a crack team of programmers, the computing power of a room
full of servers, and a budget of hundreds of thousands of dollars.
Today's Internet is a friendlier place where programs like Dreamweaver and
WordPress make it so easy that even celebrities and politicians can run their own
sites. And if they can do it, believe me, you can, too! For just a few dollars per
month, you can host your site on a professional Web server. At that price, almost
any old businesses can afford to try new tricks, and new businesses can launch
with little investment.
Whether you're new to Web design or want to take your Web skills to the next level
to create a world-class Web site or blog, it's often best to start by taking a step
back to better understand your options before you dive in to the details of building
and publishing a Web site. That's what this chapter is for: to start you out with an
overview of the different kinds of Web sites and blogs, to help you appreciate how
templates work for different kinds of sites, and to introduce you to the tools and
technologies you can use to create your own Web site.
Part I: Laying the Groundwork
I'm not offering any "get-rich-quick" schemes in this book, but if you're ready to
share your talents with the world, the Web is a better place than ever. And because
I know you probably don't want to spend all your time creating your Web site, I've
gathered everything you need in this book to make it easy for you.
Checking Out Examples
of Success on the Web
Before I get into the technical details in this chapter, here are a few Internet success
stories to inspire you and give you an idea of what you can do on the Internet today:
W Three friends in Chicago started www. threa. disss . com as an entry into a
contest, hoping to win $1,000. The business took off when designers flocked to
the site to submit their artwork to be printed on t-shirts, and millions of people
started placing orders. In a case study, the Harvard Business School cited
Threadless as an example of a "perfect business," one that has made its found-
ers millionaires, thanks to the Web.
\^ Two creative Chefs blended Korean barbecue with Mexican tacos and created
Kogi, which they sold out of a lunch truck in Los Angles. When they started post-
ing the schedule and location of the truck on Twitter.com (the popular micro-
blogging Web site), crowds started lining up in advance for their fabulous food.
Word spread and Kogi became a breakout hit. Today, in addition to the Web site
shown in Figure 1-1, they have more than 42,000 rabid followers, and three state-
of-the-art trucks roaming Los Angeles and catering Hollywood parties. You can
learn all about their great food and thriving business at www . kogibbq . com .
)) )
Hsrwn BBQ-Te-Ge
■lohir uru.i CAT~Jh6 nn^iivrF; t.^ma^t
* KOGI f E*T|.ilf E Wmi ii '.i
NIGHT FOOD n iSl'lN
KlmcHM Pas I ram! MelL
□ DflMIl ^Un n =i™^
The- heart □! Ihi:- special is caiamalElnD the
Pista-Tii and fimchl tig a\hnta dewlap adaap
■ , i-i i - - ■- ■ ■ - :■
nhfrTr vwt Ihrn inp ii v'h i;i piciord ptiTrnmoni-
and augJa and a : mal da: h or Jtwrnt mara 1ar
Ta clesrita t» palsta wb sit d par | |
Figure 1 -1 : The Kogi lunch truck in Los Angeles developed a loyal following
and a growing business thanks to their tasty Web site and
smart use of www.Twitter.com.
Chapter 1 : Exploring the Best Ways to Create Web Sites ^
Drop Books
Nebra
A truly fanatical hockey aficionado who writes under the pseudonym "Eklund"
built HockeyBuzz.com from a tiny fansite dedicated to the game he loved into
the core of a media empire that employs more than 50 bloggers and launched
a show on XM Radio.
f the most popular personalities on YouTube, Fred is a 14-year-old kid in
Nebraska who parlayed a cheap video camera and YouTube into a multimillion
dollar career. If you're old enough to drive, you've probably never even heard
of him, but his videos are watched by millions of giggling kids every week at
www. youtube . com/user/Fred.
Gossip writer Perez Hilton built a career through his blog where he's known for
his snarky comments. His celebrity-filled site at www.perezhilton. com is now
read by more people than the tabloid magazines in the supermarket check-out
aisles, and he charges thousands of dollars to make personal appearances at
events.
\^ A woman who just loved to shop and find bargains built Outblush.com into a
must-read beauty, fashion, and makeup advisor for millions — and a success-
ful business for herself. Her site, featured in Figure 1-2, is now as influential as
many glossy fashion magazines, and her product reviews can make or break a
new line of products.
Wt W I SHIRE
LJ
Ttotve Souh BookArc Madmrt
Desktop Sand
Our met 1005*00 1 6 ooodiea refse U« itw
arouid Imwn ™ih acc< : sancs l%sl lalta malch
fliBHieMhlcBtK«.inev*(iiiiiWii(i ion eui
aur hlacboolrt down with Itia Blegant BaakAr
NacbcckDnEldDp SfcrcS tram Nic-
enuuswe iisalsriBrTvi'ei« Scon nwj^ifoi
Imns nfrsnynu want Id pluo >>-r Mxbnnt ria
Ihu li J (.|M«1 Juil to'jk d!1>:'» hvu ■ II|U<, CjO
well iDQChf^f . dnnl tm"
■HHE LIFE | GWBETE
■1 ' Llr I i-UIf-
■siicri OuiOiuSfi
AUTY LIFE
OiJbhjah a m blag kr-qrli wtn km la ihap Gu rlaJhl dia.3
i^thi bf it I , hofM zhjlf.baMiY dvra , Hid nan. hkfw
l«£ -Se"4 pttJKJ 4v*v iriitOM — tifjbrfirb It!, H&\ If »
emu '_4jJa . pa) oli fiii ited, or Mow ui ui rwtter.
Vuui
SPtwaCftOUTBLUSH
Figure 1 -2: The creator of www . outblush . com made a name for
herself with a well-researched collection of product reviews.
What all these Web success stories have in common is that their creators were able
to use technologies that are cheaper and easier to use than ever before to do what
they do best in front of a bigger audience. And that's one of the most powerful ways
to use the Internet.
J 0 Part I: Laying the Groundwork
Drop 3 oaks
How) much does a Web site cost}
stion many people ask Web
ne of the hardest to answer:
How much does a Web site cost?" Just
because the answer is, "Well, it depends . . ."
does not mean that we're trying to be eva-
sive. (Well, maybe some people are inten-
tionally evasive.) The truth is that the answer
is complicated.
Building a Web site is often compared to
building a house because the cost depends
on what materials you want to use and
how much experience and fancy tools you
have. Like a house, a Web site can range
from a Spartan hut with bare walls and a
dirt floor, to an opulent mansion tricked out
with the finest marble, to a secure fortress
with layers of security guards demanding,
"Identification, please."
In the land of the Internet, these buildings
might compare with a simple profile site, a
multimedia showcase, or an e-commerce
business site with shopping cart features.
The good news is that thanks to the advances
in Web technology, you can build any of
these kinds of Web sites for about the cost
of this book and a little of your own time. All
the software featured in this book is avail-
able for free (or at least a free 30-day trial).
If you use the templates you can down-
load from this book's companion Web site,
you should be able to create a Web site in
just a few days. And if you want advanced
features, like e-commerce or video, don't
worry. You find instructions in these pages
for using some of the newest and best
online services, including Google Checkout,
which makes it easy (and economical) to
add a shopping cart to your Web site, and
Vimeo's video hosting service, which makes
it possible to offer high-resolution video on
your site without an expensive Web server.
You find links to all the online services,
templates, and software featured in this
book on my companion Web site at www.
DigitalFamily . com/diy.
Creating Web Sites With the
Templates in This Book
My goal in this book is to help you create not just a Web site but an online presence
that truly serves your goals, whether you want to launch a new business on the
Internet, promote an organization you've loved for years, or stay in touch with dis-
tant family members and classmates.
Here are a few of the kinds of Web sites you can create with the templates and
instructions included with this book:
Portfolio: Photographers, graphic designers, and artists are quickly realizing
that one of the best ways to show off their work and win new (and better-
paying) clients is to have a snazzy online portfolio. In Figure 1-3, photographer
Jasper Johal showcases his photos in an online gallery that makes it easy to
view a collection of images on his home page and in a series of galleries on his
Chapter 1 : Exploring the Best Ways to Create Web Sites J J
DropBooJfi
site. A consulting firm could also use this type of site template to showcase
a series of case studies, or by a carpenter or landscape architect to share
photos of completed projects. You'll find templates for this design on the
companion Web site, and instructions for customizing it to create your own
n Chapter 7.
ine profile: It used to be that "who you know" was the key to getting
ahead. Now it's "who knows you." A Web site is a great way to introduce
yourself, your business, or your club to the world, and it's also an important
way to make it easy for other people to introduce you when they make a
referral.
Consultants, authors, attorneys, dentists, and other professionals are well
served by an online profile site that includes biographical information, a list
of services or specialties, references, awards, testimonials, and links to com-
pleted projects and descriptions of your work. The template shown in Figure
1-4 is included with this book, and you find instructions in Chapter 7 that will
help you to create a variety of profile designs.
Club or organization: Better than a bumper sticker, a Web site is an excellent
way to showcase your favorite clubs, charities, after-school activities, hobbies,
and more. The Web enables you to easily notify everyone of meeting dates
and times, or post pictures and descriptions of recent awards and triumphs.
A well-designed Web site can save organizers from having to make dozens of
phone calls just to see whether everyone is good to take the soccer team out
for ice cream after practice next week, or to coordinate fundraisers for worthy
causes. You can use any of the templates featured in Chapters 7-9 to create a
Web site for a club or organization.
JASPER
O H A L
P H O T O G
A P H Y
si" I*** ~m
HOME FASHION YOGA DANCE INDIA BIO
CONTACT IUJY ART
Figure 1 -3: Portfolio sites can showcase photos or artwork, like this photo
gallery on Jasper Johal's Web site.
J 2 Part I: Laying the Groundwork
David I,a Fontaine
FPStEejQ ■ —
Bp J^^H r*m al^^
■E • ■■*->■ jraa ruu
aWK*^- 1
li> inrWiHMI
J*«J.I» - MM. *a~ au
Ikaqluik'ufl'Uia'a
■h^iBTiMi i r - 1
1 ■■" i r-na « i *J-irr- 1 arm
•» * ** w---** -| j m>* 1
i ■ M j i
au UMlrn
Aianva^k 1 1 II 1 1 t l 11 T ■
ataHMIrMhHi-i^M ari
■riiiMjiBiJk «.»iIfr»<«p* M
HL*lfriKfe*CiM Kudlv
•-FIAA -at ■»■ i>«f«S -T Ft— ran - l'"Al\ ari
aaaVa Praal bb Ian &aa aa- Par Ln LA Vaaa.
^HWaiBBk'ttm-Unal.'LrtBiB.IIH. aan.u
-aaraeanlaa Eagh Iraa mmt Mm
HahAfmha laa "i-i-al fca laaa| ImTI
1 ME aTh tf - Hi "/all
art V* afa- H aWMW HU
1 1 ■ -(bf rra raaaf ^bbbbbi ]bbb aeei |
Jenny Hontz
8$ \
iaf BaH*aWJM| HI
Ik-taraahnavalj PL-Mr
""Jll^k ■ I l. riti ■ AfUJffe
S3
-ii-—- 1 -.i—i i.J
--railirlH"— ■ -■■
rln-i'MBF.MBBVU ■Mh.Aaaa. gaj M aMH "*Ma> m ■ «ll fcfl a HmV bMM U aal
jmmi Am Am p*M Par aa-to** U-m aUn i1>h.«Ibm-|
Kha.M OL^h IV art*
•n- : .■ - l-L- i-i aaf W-r- §-i
t _■ ^ _
Figure 1 -4: You can use a template, like this design for a professional profile, to create a variety of
designs. Change the templates a little, or a lot, to make them your own.
Small business: Whether you want to share your professional services, like
the massage therapist featured in Figure 1-5, or you have a growing business
taking care of pampered pooches, like Pamela's Pet Services in Chapter 2,
creating a Web site can make all the difference in your success, online and off.
You can edit any of the templates in Chapters 7-9 to create a business Web
site, but the designs in Chapter 8 are especially well suited to business needs.
Family and wedding: Before couples say "I do," more and more of them are
building wedding Web sites that feature invitations, directions, guest regis-
tries, and more. And, as a family grows, building a Web site is a helpful way
to help the doting grandparents impress their friends without having to carry
a wallet bulging with baby pictures. You can use the template featured in
Chapter 9 to create any kind of site you want, but it's especially well suited to
creating a site for the entire family, much like the one I created for my brother
and his family, shown in Figure 1-6.
HOME
ABOUT ME
ATPOINTMINTS
TREATMrNlS
Policies
Rates
Links
contact
Chair massage
New Clients
HOME
t em a wife, mom, entrepreneur ard Massage rhercpbt 1 have
a, wonderful husband a beautiful daughter. M, famh is the
iijfit r/ mv ire Checi out: mv abaut Me tab co tearn more .
"awing practced Passage Therapy for the last nine years 1
draw firm man* drHerent types of Mnssaae for cadi session. [
taitor eacn Massaoe sesson co vour soecflc needs and
concerns Treatments may indude a bend of Deep Tissue,
focusing on the deapar layers of muscle, end therapeutic
Mas? ao? Dfomcerij rela^adcn an j awareness.
[fs slmfle neiihj . you come in rot a message with aches, oams
and possible IHe stressors. You leave feeling better and with
your ipmti Irtcd. Massage just makes you teal better, It is nn
wonder I can find those scots that hurt and feel so vuoVy—
mass ape and helping people teal better is something [ really
lotedcwa
Call to schedule an acooirtmetit at 512-799-706 1 for either of
my locations . I am practicing at Plum Blossom Wellness and
Thnva— both n South C antral Austin Texas. Mv rates ana (65
for a one-hour session and $W for a hour and a har sesson [
lode forward to meeting youl
Figure 1 -5: The use of a big image in the background of this Austin massage
site help create the feeling of a design that fills the page.
Chapter 1 : Exploring the Best Ways to Create Web Sites J ^
Figure 1 -6: Showcase your family, wedding, and new baby photos, and stay
connected with all those you love.
Comparing Web Design Options
The first step to building a site is choosing what kind of site you want to build. So,
before you get too far into creating your own site, it can help to start with a general
introduction to how different features are built on the Web.
To start, know that Web sites fall into two very broad categories: static Web sites,
which are generally built with a program like Adobe Dreamweaver, and dynamic
Web sites, which use advanced programming to create advanced, interactive fea-
tures, like those used in a WordPress blog. Keep in mind that you can add multime-
dia, video, audio, animation, and so on to either type of site.
Static Web sites are made up of a collection of individual pages with the . html or
. htm extension. You might think that all Web sites are made up of individual pages
(and in a way they are), but with static sites those pages are saved as separate files.
With a dynamic site, as you discover a little later in this section, the pages you view
in a Web browser are created dynamically as they are delivered to the browser, so
they're not saved as individual pages but as pieces of pages that can be mixed and
matched. That gives dynamic sites many advantages, but it also makes them a lot
more complicated to create.
The upshot is this: Because dynamic Web sites are more complicated to create, if
you're just creating a simple profile or small business site, dynamic sites are often
not worth the extra effort. The big exception comes in with blogs, because thanks
to specialized blogging tools like WordPress, creating a dynamic site with the
common features of a blog is relatively easy (as you learn in Chapter 11).
As a result, many people create both a static Web site for their profile or small busi-
ness and a blog where they can easily add posts and other updates.
Part I: Laying the Groundwork
Static Web pages
Stat
DropBo®
Sim
Static pages are easier to design, and they work well for small- and medium-sized Web
as a professional profile or an online gallery. Because static Web pages
in plain text, you can create them in a program as simple as Notepad or
SimpleText although tools like Adobe Dreamweaver and Microsoft Expression Web
make it a lot easier and save you having to remember all the cryptic XHTML tags.
A static Web site offers a few advantages, especially if you're just starting out,
including the following:
W Easy to learn to develop: Anyone who can resize a photo has a head start on
the skills needed to create and arrange graphic elements on a static page.
Gives you complete control over design of each page: You can tweak the
size, colors, fonts, and arrangement of the elements on each page individually,
and you can edit templates for these kinds of sites more easily than the tem-
plates for dynamic sites.
W Easy to build, test, and publish to a Web server: You can create and test
static Web pages on any personal computer and then host them on any com-
mercial Web server and you only need FTP access (which is built into pro-
grams like Dreamweaver) to publish pages to the Internet.
Dynamic Web paqes
The technical aspects of dynamic sites get complicated quickly, but the gist of it is
that instead of creating a collection of individual pages, you store all your content
in a way that makes it easy to display text, images, and other data in a variety of
combinations. That's what makes it possible for shopping sites like Amazon.com to
keep track of your last order and recommend books when you return.
A site can even gather information from different sources to create complex pages
dynamically. For example, you can combine information about customers' shop-
ping habits with a list of your overstocked items on sale and create a page tailored
to each visitor.
Dynamic sites are generally created on a Web server by combining CSS (Cascading
Style Sheets, introduced in Chapter 4) and XHTML (which is more or less HTML that
complies with today's standards, also explained in Chapter 4) with more advanced
technologies, such as PHP, ASP.NET, or ColdFusion. That brings up another of the big
challenges of working on dynamic sites: You have to build and test dynamic pages
on a computer that runs a Web server, which is a lot more complicated than simply
installing a Web browser on your personal PC to test your pages, as you learn in
Chapter 10. Launching a dynamic site on a commercial Web server is also far more
complicated than publishing a static page site to a Web server.
That said, the advantages of dynamic Web sites are significant, and most big sites on
the Web are created this way, but most of the big sites on the Web also have a team
of experienced programmers behind them. Unless you have advanced programming
skills or a big budget, the challenges of creating a dynamic Web site mean that most
small- and medium-sized Web sites are still better served with static Web sites.
Chapter 1: Exploring the Best Ways to Create Web Sites
The big exception is blogging. Although blogging tools, such as WordPress and
Blogger, create dynamic Web sites with all these advanced capabilities, they do it
in a way that makes it relatively easy to launch and update. As you discover in the
section on WordPress templates that follows, it's easy to create a blog but not so
S|s^b@lit the templates for a blog — another reason to consider creating a static
program like Dreamweaver. And remember: You can always create one
of each, to get the best of both worlds.
The gardening Web site www. GardenstoTables . com (featured in Figure 1-7), was
created with a program called Joomla!. Similar to WordPress, Joomla! offers many
types of templates and add-ons to make it easier to create a dynamic Web site.
These tools are ideal if you plan to create a large, complex site, especially one that
you expect to grow to have hundreds or thousands of pages over time.
The advantages of a dynamic site include
Easily updated: When you want to put new content into a dynamic Web site,
you can simply add a new product or image to the database, and it automati-
cally appears in all the corresponding pages in the site.
\^ Consistent look: When you create a dynamic site, you have to use templates,
which help create a consistent look across a Web site. No matter how you
build a site, being consistent is good practice when it comes to navigation but-
tons, banners, and other essential elements you want your visitors to find no
matter which page they visit.
\^ Easier to redesign: All great Web sites grow and change over time, and as they
get bigger, they become even more complex to redesign. With a dynamic site,
you can simply update the templates, and the content will automatically be
included in the new version of the site.
vr>nt Popular Articles
• Cucumber and Lawendei Wcvto
• Fun Facte *ioui Wateinmori*
• AMU Us
• Epnnflis a Ore at Hire to Plart
Garden Poll
to* it do yarn Iim> the raaest futi
Wo.-r:
B Tommies
Squash
GardenstoTables
Grow what you make. Make what you grow
Bring Your Garden to the Table
From IrrfpatiorirtD ganders to larger cammunhY plats, thn
■srte n- p»rt af * modern erf, a movement tact to growng and
maun j our o*t rre«n. deicioue. heamy road
Our mrseion is to share g»m>cing ip» and lenpw wth
0irrerewti0 3n3M r j i.r <3ueftP8Dk> agnculuie.
>■■■• In me smallest urban <•!•■.<■
»v* wii mo r»«tuN tawi meee. cieew*. wotsnoc* and
Other OhHUWrttO »atn «tOJ'>*i»ilrig fiorr tn) ewetlS.
and «4II puUiibA Mdpt to support oitjanit tonrw and the
restaurants and hotoli trial use local produto
6EPrEM6EP It WHEN
We cekot ate -The EdMe
CadMk*
Trie New roth Botanical
Garden n dong usttiat
umlti » senw ol erhrirts
- ■) »«E<iisirirougn
Seplerrdei 13 Fen mere
rtfDrmalon. sicrt
nKvrvrrnjtporg
M fAvomie book •■
ChiporJe: Providing a Commitment to Local Produce
- and a Recipe for Spicy Guacamc4e
w o
Figure 1-7: Online blogging and content management programs, such as
WordPress and Joomla!, make it easier than ever to create
magazine-style sites like Gardens to Tables.
Part I: Laying the Groundwork
Multimedia: \lovt tike to move iUmoVe it . . .
I use the ca
DropBoGfe
Multimedia
I use the catch-all title "multimedia" to describe anything that moves on a Web
hat's a lot of different things these days, and most people have trouble
the different ways you can make characters sing and dance on the Web.
should be considered distinct from static and dynamic sites because
video, audio, and images can be added to both static and dynamic Web pages.
Today there are many ways to add multimedia to a Web page, and the same series
of animated images could be created using video as an animation in Adobe Flash or
as a simple animated GIF. One of the newest ways to add interactivity to a site is to
use a technology called AJAX, which combines JavaScript and XML and is growing
in popularity.
Fortunately, you don't have to worry too much about all the technical details to
add multimedia to your Web pages. As you learn in Chapter 13, you can easily add
many different kinds of audio and video formats using Adobe Dreamweaver, and
you can even upload videos to a site like YouTube or Vimeo, and then insert them
into any Web page with copy-and-paste ease.
Working With Different Kinds of Templates
The term template is used in many different ways for many different kinds of design
work (on and off the Web), but essentially, a template is a shortcut in the design
process. Think of a template as a set of design specifications that you can use to
control the look and feel of your Web page. Templates can be used to set the back-
ground colors, how many columns (if any) your Web pages have, what font sizes
and colors are used, how links are handled, and so on. Just about any aspect of the
design or functionality can be set or adjusted by working with templates.
But not all templates are created equally. Although they all share those basic
characteristics, many different kinds of templates are in use on the Web today. For
example, most of the templates featured in this book were designed to create static
Web sites with Dreamweaver, but they are quite different from the kinds of tem-
plates you would use if you were creating a blog with WordPress. You learn how to
create a WordPress blog in Chapter 11, but before you start using any of these tem-
plates, I think it's helpful to better understand how they are different.
The templates featured in this book are
Dreamweaver templates (extension . dwt)
Dreamweaver templates offer many advantages without requiring advanced pro-
gramming skills. When you create Dreamweaver templates with the . dwt exten-
sion, you can use XHTML and CSS to create relatively simple static Web sites that
include high-end features found on dynamic sites, such as the ability to create new
pages quickly and to update every page in your site with the click of a button.
Although you can use Dreamweaver to create templates that use advanced
programming like PHP or Java, the . dwt Dreamweaver template is a much
simpler option that is ideal for small- to medium-sized Web sites, which is why
I used this template style for the profile, portfolio, small business, and family
sites featured in Chapters 7-9.
Chapter 1 : Exploring the Best Ways to Create Web Sites J *J
DropBooll
You can even create your own Dreamweaver templates by following the
instructions in Chapter 6, and you can download Dreamweaver templates
from many different Web sites (some for free, others for a fee). If you have this
book, you have everything you need to download the collection of templates
Jially designed for the tutorials in Chapters 7, 8, and 9. Just visit www .
?talFamily . com/diy and follow the simple instructions to download
the Dreamweaver Templates and image files included with them.
WordPress templates (extension: . php)
Templates such as the ones you get with a blogging program like WordPress
use the extension . php because they are written in the PHP (Hypertext
Preprocessor) programming language. WordPress templates offer many of
the same benefits as Dreamweaver templates, except that templates for blogs
like WordPress draw their content from a database. As a result, they include
XHTML and CSS like the Dreamweaver templates, plus much more complicated
programming in the PHP programming language.
When you design a blog or any other kind of dynamic site (explained in greater
detail in the previous section), it's important to understand that the technol-
ogy behind the scenes gets complicated very quickly. This may seem counter-
intuitive because creating a blog on a site like WordPress.com is so easy, and
updating a blog with new posts after it's been built is super easy.
But here's the rub: It is easy to create a basic blog with a WordPress template,
but it's not easy to edit a WordPress template. Thus, if you want to be able to
change the design of your blog pages, alter the fonts, colors, and other design
features, things get complicated really quickly.
What kind of templates should you use)
Which templates are best for you depends on your goals and your technical skills,
but it comes down to this. If you're creating a relatively small Web site (less than
50 pages), you'll probably have an easier time with Dreamweaver templates and the
instructions in Chapters 7-9 for creating profile, portfolio, and small business sites.
Matching templates and technology
In addition to the WordPress and
Dreamweaver templates featured in this
book, there are many other kinds of tem-
plates in use on the Web. For example, if
you download a template designed for
Adobe Flash, you'll need a program that
supports Flash to edit the pages. Flash tem-
plates end in the .swf extension, and you
wouldn't be able to use a Flash template
with WordPress blog, for example.
Other kinds of templates in use on the Web
today include templates for Microsoft ASP
and ASP.NET sites, which use the . asp and
. aspx extensions, respectively.
If a site is created using the Java or Pearl
programming languages, the templates
should end in . j sp or . prl, respectively.
The big lesson is this: Make sure you have
the right kind of template for the kind of site
or blog you are creating.
Part I: Laying the Groundwork
DropBo
If, however, you want to create an online journal or magazine that you will update
often and expect to grow to hundreds or even thousands of pages, then creating a
blog with WordPress is well worth the extra effort.
where it gets really fun. Many people create both a Web site, say for
ess portfolio, and a blog where they can add posts and other updates
over time. Linking a blog and a Web site together is easy, and with this book, you
have everything you need to create both.
Reviewing Web Design
and Graphics Programs
I've chosen the most popular and powerful tools for you in this book. After years
of testing Web design programs and building many different kinds of sites, I have
found these to be the best options for the kinds of sites featured in this book. But
that doesn't mean you can't substitute another program you prefer (or already
have lying around your hard drive). For example, if you already have the full pro-
fessional version of Adobe Photoshop, you can definitely use it with the lessons in
the book. But because that program alone costs around $600, 1 choose to feature
Photoshop's little sister, Photoshop Elements, which has all the basic features you
need, but with a simpler user interface (and a price tag of less than $100).
When it comes to creating Web sites with XHTML and CSS, my first choice is Adobe
Dreamweaver. If you're a Microsoft fan, I have to say I've also had good success
with Microsoft Expression Web, and you can use that program to create all the
sites featured in this book as well.
Both Dreamweaver and Expression Web sport graphic user interfaces that allow
you to accomplish tasks through clicking and dragging instead of writing compli-
cated CSS and XHTML tags. To help you appreciate the differences between these
programs, you'll find a few more details in the last section of this chapter.
Although I believe that Photoshop Elements and Dreamweaver are the best pro-
grams for do-it-yourselfers just getting started on the Web, I include this general
description of a few popular Web design and graphics programs on the market
today to help you better appreciate your options. (You find descriptions of the
most popular blogging programs, such as WordPress and TypePad, in Chapter 11.)
Comparing Web design programs
In the early days of the Web, people were using lots of different visual HTML
editors. Today only a few major ones are in common use on the Web: Adobe
Dreamweaver and Microsoft Expression Web. Both programs are available for
download as trial versions.
Adobe Dreamweaver: By far the most popular choice among professional Web
designers, this award-winning program offers high-end development tools,
excellent design features, and valuable support for all the latest Internet tech-
nologies. Dreamweaver features a wide collection of customizable palettes,
Chapter 1: Exploring the Best Ways to Create Web Sites
19
floating dialog boxes, and toolbars, which makes it look more like an image
editor than a word processor. If you're serious about Web design, this is the
tool to use, which is why I chose Dreamweaver to feature in this book.
don't have a copy of Dreamweaver, you can download a fully functional
y trial version for free by visiting www . adobe . com/ dreamwe aver.
You find an introduction to Dreamweaver in Chapter 6 and step-by-step
instructions for customizing the various templates featured in this book
in Chapters 7, 8, and 9. When you're ready for more advanced design with
Dreamweaver, you find a collection of online tutorials at www. Digital
Family, com/dreamweaver (shown in Figure 1-8), including excerpts of
my book Dreamweaver CS4 For Dummies (Wiley).
Adobe Contribute: Contribute is designed to make it easy for anyone to "con-
tribute" to a Web site. This reasonably priced program is easy and intuitive
to use, but it's not a stand-alone program. Contribute isn't designed to create
Web sites but to help you easily update an existing site. You need a program
like Dreamweaver to create a Web site using the templates in this book, but if
you want to enable others who know little or nothing about the Web to update
the site, Contribute is a great option. You can download a free trial version at
www. adobe . com/contribute.
Microsoft Expression Web: Just because I loved Dreamweaver first doesn't
mean I don't respect Expression Web. Microsoft has a lot to be proud of with
this relatively new professional design program. Expression Web offers strong
CSS support and follows standards better than FrontPage ever did. You can
create XHTML and CSS with Expression Web, and you'll find special features for
creating dynamic sites with ASP.NET. If you generally prefer Microsoft products
and/or work with a developer who uses Visual Studio, you should appreciate
the compatibility between Microsoft Visual Studio and Expression Web. You can
download a free trial version at www. microsoft . com/expression.
Li I : il jJF ifTiijLcare | Fih MdiIiIi m Wob doilq*, Dig imwiinf. akd EMpnsc nn 1Vi:t hy iuBdi Jul -WlrJmra ln4orn*1 Exp nrni
FWQrtftf h EhgrfilFirrilj.cEim | Fni -lufairiili in Uhb cbngn, .
l5igitalfamily.com
Home Bookstore
What do you want
to learn today?
Microsoft
Expression Web
■Adahe
Dreamweaver
Where to start with
your web Eite
How to create a. Klog
or wsblog
FVte pla:es to share photos
online chat are easy to use
Tips for cresting postasc
stamps and other coo] stuff
with your photos
glgfj
amwearvtr
Bqa-e^on Web Free Tutorials Cool Stuff
Wi; learnt Lu niy DiyiLiI Family
IT I
Hi, I'm Jamne Warner, auctior of
more than a Jozen bonis about the
Internet and a growing colleocion of
[ranung videos and free tutorials.
fri this site, youU End:
Fl ee Web design tiruiaJs on
Ariobe Dreamweaver. I'oo.and
Flash
Flee tutorials ton Microsoft Expression Vfeb,--55, arid
Fvofessiond] Training Videos
Answers tooimmon questions in the Drea mweiiugr FAQ
Ask the Author (FAQ)
Just getting started'? Navigate the many
4Ar:i'..'"j In rri'nl in l/Ji«h s: i i ■ ■ nr hlnn
/tQLi Us
■ ■■■■ - •• •' ■■ ■
wcti D*f*!jri Book*
" . .. ■
^\ '. LkU. ■%*
Figure 1 -8: You can find more tutorials for Dreamweaver and Expression Web
on my Digital Family Web site.
Part I: Laying the Groundwork
Comparing image editing programs
You can find
DropBo©fe
Internet, sue
You_can find many choices in the world of image editing programs, from high-end pro-
as Adobe Photoshop, to "prosumer" (professional consumer) products,
hop Elements, to simple programs that you can download for free over the
, such as Irfanview. Here's a quick comparison of image editing programs:
Adobe Photoshop: By far the most popular image editing program in the history
of computer design, Photoshop lets you create, edit, and manipulate images in
myriad ways. It's a professional tool with a professional price tag (around $600),
so unless you have a big budget or you're a serious photographer or designer,
Photoshop is probably more than you need (or want to pay for). You can down-
load a 30-day free trial version at www . adobe . com /photo shop.
Adobe Photoshop Elements: Photoshop Elements features many of the same
powerful tools as Photoshop, but it's easier to use and costs less than $100.
Elements provides more than enough power for almost anything you need to do
on a Web site, including optimizing images in the JPEG, GIF, or PNG format so that
they download faster over the Internet. You find an introduction to Elements and
instructions for creating and optimizing graphics for the Web in Chapter 5.
The difference between Photoshop and Photoshop Elements boils down to
this: The expensive version is used by magazine editors and high-fashion
photographers, for example, to perform painstaking, exacting work on their
photos, to make flawless images that can be turned into four-color separations
to run on million-dollar printing presses. (Given enough time, you can use
Photoshop to make a mule look like a supermodel.) For the rest of us, who just
want to edit photos or perhaps create the impression that Uncle Ernie's basset
hound is driving the lawnmower, Photoshop Elements is all you need. You can
download a 30-day free trial version at www. adobe . com/ elements.
Adobe Fireworks: Fireworks was designed specifically for creating and optimiz-
ing images on the Web. Fireworks is a favorite among many professional Web
designers because you can create a complete page layout in Fireworks, and then
use the program's slicing tool to optimize and export images for the Web while
Fireworks automatically creates the necessary XHTML code for you. It's not a
perfect science, but it's pretty impressive. And because Fireworks is integrated
with Dreamweaver, you can move back and forth between the two programs,
which makes it easier to make changes to designs that use lots of images. You
can download a 30-day free trial version at www . adobe . com/ fireworks.
Free image editing programs: Search the Web for free photo editor, and you
find many listed but only a few that are even worth downloading. If you're will-
ing to settle for a more limited program to save money, consider the online
editor at www. irfanview. com or download the popular GIMP (GNU Image
Manipulation Program). You can find this open-source editor (available for
Windows, Unix, and Linux) at www. gimp . org.
Chapter 2
DropEftfflttfng Makes Web Design Easier
In This Chapter
^ Pinpointing your Web site goals
Understanding the benefits of developing a plan
Stepping through a project plan
Accommodating new ideas while sticking to your plan
^ Creating an organized, consistent design
I f a potential partner approached you with a "great new business idea" guaran-
I teed to make you money, you'd probably ask a lot of questions before you even
considered writing a check to get things started. You'd probably also develop a
business plan, or at least explore in detail how the new business would work, how
much it would cost you, and how much money you could expect to make in return.
If you're considering creating a Web site, or redesigning the one you already have,
I recommend taking the same cautious approach. After all, a good Web site is an
extension of your business — and, in many cases, a new product, service, or store-
front that deserves the same level of planning as any other serious business ven-
ture. Even if you're creating a site for a hobby, vacation photos, or pictures of your
family, the principles covered in this chapter will help ensure that developing your
site goes smoothly and the final result gains you all the approval and praise you
deserve.
This chapter is designed to help you carefully consider the many aspects of plan-
ning a Web site before you start building. You'll also find a series of questions to
help guide you through the early stages of the development process.
If you can complete the exercises in this chapter with a business partner or someone
you trust to provide a reality check, I recommend it. You know what they say about
decisions made in a vacuum: They generally suck. If you're reading this book, you're
probably already convinced that you should create a Web site, and you may even
have a pretty good idea about how you want to design it. Before you dive in, talk
through the process with someone else who can provide a fresh perspective and
help you consider aspects you may have overlooked. It's also a lot more fun to go
through the exercises in this chapter and answer the questionnaires with a partner.
Don't worry, though, if you're on your own (or you're determined to keep your proj-
ect a secret until it's done). Consider me your virtual partner and let my questions
and planning tips in this chapter serve as a guide to get you started.
22 ^ art Laying the Groundwork
Developing a Project Plan
DropBo&l
As vfith most project plans, a good Web site plan is made up of a series of tasks, a
imeline, and a list of the resources and materials you need. Taking the
ate a detailed project plan gives you a structure within which you can
work with greater confidence, and a much better chance of meeting your original
goals on time and on budget.
The following list provides a step-by-step approach to creating a project plan:
1. Define the goals and objectives of your site.
2. Create a content list.
3. Create a task list.
4. Set a timeline.
5. Establish a budget.
6. Assemble a team.
7. Create a site design and navigation structure.
In the sections that follow, you find out the details involved in each of these steps
(with the exception of Step 7). Creating your design and navigation is such a big step
that it gets a section all its own later in this chapter, "Designing Your Web Site."
In the sections that follow, you find out the details involved in each of these steps.
Defining goats and objectives
The series of questions in this section are designed to help you assess how a Web
site can best serve you, your business, or organization. Taking the time to answer
each question should help you define the goals of your site and create a guide that
you can use as you organize and prioritize the development.
Before you start sketching out the home page (also called the front page), define the
most important aspects of a Web site to identify what you really need. Remember
that you can always start small and develop a Web site over time. And there's no
rush to get the site up as fast as possible — the Web isn't going anywhere, and the
best uses of the Web are the ones that will be around for a long time.
Before you even start, make sure that you and your staff (or friends and family) are
clear about why you're creating a Web site and what it will take. Spend a little time
answering each of the following questions, and use your responses to shape the
planning and implementation of your Web site. Creating an outstanding Web site
takes effort, and that effort can take time away from other things that are impor-
tant. The more you plan, the more you have time left over for a little fun and relax-
ation (at least once in a while).
Chapter 2: Planning Makes Web Design Easier
Why is having a Web site important to you?
Separate the pipe from the dream and get clear on your true motivation.
What are your objectives?
mine whether you will use your Web site to promote your business, sell
products or services, cut costs, showcase clients, provide customer support, stay
in touch with friends and family, or do something that no one else has ever done.
As you go through the planning and development process, write down your
top goals and refine them until you have two (at most, three) clear objectives
for your site. Then keep your list somewhere that you're forced to look at your
objectives regularly, like the edge of your computer monitor or the bathroom
mirror. Whenever you have a question about any aspect of the design, content,
or development of your site, refer to your list of goals and make sure that your
decisions remain true to your objectives.
^ How will you measure success?
You won't achieve success with your Web site project unless you can effectively
measure its results, so be sure that you can voice your objectives in measurable
ways. The more specific and quantifiable you can be, the better. For example,
rather than just state, "The goal is reducing the telemarketing staff," assign an
amount and a timeframe to make an objective quantifiable, such as, "The goal
is reducing the telemarketing staff by 20 percent in six months." Doing so helps
you make sure that you're taking the necessary steps to achieve that goal.
\^ Whom do you want to visit your Web site?
Consider your audience above all else. If you're creating a sales site for real
estate investors, you should probably take a different design approach than
if you're creating a game site for 12-year-olds. If you're not sure what 12-year-
olds want on a Web site, round some up and ask them.
Clarifying the target audience of your Web site should be a key factor in how
you plan and develop your site, from the vocabulary you use to how public
you make the information. For example, a site for doctors might include com-
plex medical terms, whereas a site for patients needs more common language.
Similarly, an architect might create a Web site with a public section where
potential clients can view photos of completed projects and testimonials, and
also create a password-protected section where current clients can view plans
as they're being developed.
What do you want a user to gain from visiting your Web site?
One of my favorite benefits of a Web site is instant information at 1 a.m. with-
out having to talk to anybody or wait on hold. Take time to consider what you
want your visitors to learn from your site, and then make sure that the infor-
mation is front and center in your design and development plans.
What do you want users to do after or on visits to your Web site?
The more specific you can be about what you want visitors to do on your site,
the better. Do you want visitors to buy a product, hire you to perform a ser-
vice, join an association, call and ask for an appointment, sign up for a newslet-
ter, or just tell their friends and family how cool your Web site is? Whatever
you desire, you want your site's design to encourage visitors to take that
action and to make it as easy as possible for them to do so.
Part I: Laying the Groundwork
How does your idea for a Web site compare with others?
Taking the time to research what other people have done with their Web sites
before you get too far into developing yours is an important part of the plan-
process. An afternoon spent surfing the Web for related businesses, and
inrelated businesses that have similar features, can help you identify
things you may want to include on your own site and help ensure you're not
starting a Web site in a category that's already so competitive you'll need to
really distinguish yourself to attract an audience.
Do you expect to make money on your Web site?
If your answer is, "Of course I do!" that goal should shape everything you do
as you design the way visitors will use your site. Pay special attention to the
section "Establishing a budget," later in this chapter, to help ensure you see a
return on your investment.
Besides being potential cash generators, Web sites can help you be more com-
petitive, advertise your store or services, schedule and inform staff, and reduce
travel and other types of expenses. Web sites are a great way to introduce your-
self to the world and help other people introduce you when they make a referral.
Some of the most successful Web sites are designed to save money by reducing
long distance phone charges and other customer support expenses.
Creating a content list
All the text, graphics, and multimedia that you want to display on the pages of your
Web site are commonly referred to as the content of your site. To help guide your
work and planning, your content list should include all the photos, graphics, biogra-
phies, product descriptions, maps, video files, and any other items that you might
want to feature on your site.
The best way to start creating a content list is to brainstorm all the things you
think you might want to include, such as contact information, product descriptions,
logos, pictures of the staff, and biographies.
Pamela's Pet Services defined goats
To help you appreciate how the planning
process for a Web site could work, Til
use the fictitious business, Pamela's Pet
Services, as an example. After you com-
plete the initial questionnaire earlier in this
chapter, you should create a list of goals
that looks something like this:
Promote Pamela's dog walking, groom-
ing, and other services.
Describe and showcase Pamela's pet
services.
Help customers easily find Pamela's
contact information, hours, and
location.
w Encourage site visitors to register their
pet's names, ages, and special needs.
Sign up visitors for Pamela's Pet Tips
e-mail newsletter.
Chapter 2: Planning Makes Web Design Easier 25
Pamela's Pet Services content list
Dropfeoofe
ith Pamela's Pet Services as an
Id^ShAmtent list might look like this:
Company logo
^ Contact information
Biography and photo of Pamela
is* Photos of Pamela dogs and some of her
client's pets
Descriptive paragraph about each of her
pet services: grooming, walking, and
so on
is Pricing and scheduling information
Credit and payment information and
policies
\S Photos that provide a tour of the groom-
ing salon
A map to the grooming salon
is A welcome message for the home page
is Description of the newsletter and invita-
tion to sign up
^ Company description for the About Us
page
is Testimonials from current clients
Even if you think you already know what you want on your site, you may be sur-
prised when you start brainstorming by the ideas you come up with, such as gath-
ering testimonials from happy customers. Creating a detailed content list is well
worth the time because it will serve as a valuable tool that you can refer to as you
develop your project plan, site map, and task list. As you continue to develop the
project plan and ultimately the site, you'll probably discover more things that you
want to add to the content list, so make sure to create it in a way that's easy to add
to and edit as you progress.
A program like Microsoft Word (or, if you prefer, Excel) is an excellent tool for
this task because you can easily make additions and move content around as you
develop your list.
Use the content list as you create the site map (covered later in this chapter, in the
section "Creating a site map"), and you're likely to think of additions to the content
list as you work on that step. For example, as Pamela creates the About Us page for
her Pet Services site, she might realize that she wants to add a picture of her own
dogs and a map to her grooming salon.
Creating a task list
The task list — the heart of your project plan — is a list of tasks that must be
accomplished to meet your goals and launch your Web site. Your task list should
include everything from registering your domain name to promoting your site after
it's launched.
You can create a task list in many ways, including a few software programs
designed to help with project management. If you're creating a relatively simple
Web site and you're working alone or on a very small team, you might not need
much more than a list with a few notes and dates attached to each task. If you're
Part I: Laying the Groundwork
working on a more complex project with a team, you might want to further define
the task list by using a program like Microsoft Project, which includes a variety of
features designed to make it easy to plan and track tasks.
DropBoo
create your task list, keep in mind that gathering your content is one of
me-consuming aspects of any Web site project. Most people underesti-
mate how much time they'll spend taking pictures (or finding the ones they already
have); gathering digital versions of logos and other graphics; and writing all the text
descriptions, biographies and other elements for their Web site. Creating a compre-
hensive content list at the beginning can serve as a great first step and an excellent
guide to help you gauge how long it will take you to gather, create, and review all
the contents of your site. Here are a few suggestions for breaking down the com-
plex task of gathering the materials you'll need in your site:
\^ Gather existing content. You might already have much of the content you
need in brochures, press releases, or other materials related to your company
or organization. Start with the easy stuff; it will give you a sense of accomplish-
ment right away and help you determine how much more you'll need to do.
Digitize your text. If you're including existing content in your site, you might
still have to do some work to get it all in digital format, where text is converted
into a word processing or other text file. For example, you may have to retype
text files to be able to use them on your Web site. If you have a lot of text, con-
sider scanning the documents and using Optical Character Recognition (OCR)
software to transform the scanned text into editable text.
is 0 Digitize images. If you already have photos, a logo, or other graphics you want
to use, those images might have to be scanned. Even if you already have digital
photos, before you can add them to a Web page, they must be in the correct
format and optimized, a process that helps them to be downloaded as quickly
as possible over the Internet. (Y ou can find step-by-step instructions for pre-
paring and optimizing images for the Web in Chapter 5.)
Create new content for your site. You might want to create a photo tour of
your shop (to feature on the home page) or write or update biographies of key
personnel.
If you hired a graphic designer to create your logo or brochure, you may want to
go back to that person to ask for digital copies of the text and graphics, but don't
expect to get it overnight. Plan ahead and request any materials you may need from
other people early in the process so you'll be less likely to have to delay launching
your site because you're still waiting for them.
Setting a timeline
With your task list ironed out, you're ready to create a timeline. Several popular
task-management programs can help. Microsoft Project can help you define a task,
specify how long it should take, and then associate it with other tasks on a timeline.
If you don't want to spend the money on Microsoft Project or take the time to learn
this somewhat complex program, you can create a simple project plan in any calen-
dar program or even in a spreadsheet or word processing program. It's even okay
to use the old-fashioned approach of writing your tasks on a printed calendar page.
(I rather like having them up on the wall in my office for easy reference.)
Chapter 2: Planning Makes Web Design Easier
DropBoio
Pamela's Pet Services task fist
includes many common tasks
ant to include in your own list.
Register a domain name for the Web site.
\s Evaluate and select a Web site-hosting
company.
is Create a list of all the main sections and
subsections of the site.
Create and gather photos and graphics.
Request photos or graphics other people
(graphic designer, clients, and friends).
is Write the first e-mail newsletter to send
to those who sign up.
f Request testimonials from current clients.
Create a site map that details how the
main sections and subsections will be
linked.
Download the templates from Janine's
Web site that goes with this book (www.
DigitalFamily . com/diy).
^ Optimize images, graphics, and multi-
media files to prepare them for the site.
^ Use templates to create the home page,
each main section front, and any special
internal pages.
j> Build out the pages of the site, adding
content into the page templates.
^ Test, test, and test some more.
is Publish your site on the Web.
j> Tell everyone you know that your site is
online and start working on the details
of your marketing plan.
Your main goal is to create a timeline that can be adjusted if someone misses a dead-
line or if a project takes more (or less) time than expected.
Be sure to give yourself a realistic timeframe to do a good job, and factor in a little
more time than you think you need, especially if you're new to Web design. Setting
and enforcing deadlines can help you stick to your timeline: Even if you're working on
a Web site by yourself, or with a very small team, setting deadlines can be one of the
most important parts of your project plan — and your best chance of finishing. Most
good Web sites are never-ending projects because you can always add more content
and develop them further although you shouldn't let that keep you from getting your
site launched. Set a deadline for at least the first phase of development, and then
hold yourself to it.
Tying a deadline to a special event or occasion, even if you're creating a personal
site, can help make you stick to the date. For example, set a launch date for a family
Web site on an occasion like your grandma's birthday so that you can make it a sur-
prise for her. Or, plan to publish the redesign for your small business site in time for
a trade show or annual sales event. When a deadline has a specific date and a clear
goal associated with it, it's easier to take the deadlines seriously.
Establishing a budget
"How much does a Web site cost?" is often the first question asked by someone
who decides that they want a Web site. But, if you think about it, it's a little like
asking how much it costs to build a house: "It depends." The answer depends on
how many rooms you want, whether you want a marble or cement staircase, and
Part I: Laying the Groundwork
DropBooks
whether you want a swimming pool in the backyard. You may have no idea how
much it costs to build a home. After all, different contractors provide different price
quotes based on how experienced they are or the kinds of materials they plan to
use.|If you're planning to build the house yourself, it becomes your job to figure out
e features you want are reasonable and affordable.
Fortunately, most Web sites (at least the kind you're likely to build yourself with the
templates and instructions provided in this book) don't cost nearly as much as a house
(or even a dog house). Before you can set a realistic budget, though, you need to break
down the project into pieces (by following the steps outlined earlier in this chapter)
and then start adding prices to the task list in your project plan. Determining the cost
of each element of a Web project helps you manage the cost and scope and estimate
the overall costs. Among the key costs you can expect are the ones in this list:
\^ Web hosting: This service can cost as little as a few dollars per month or as
much as a couple of hundred dollars (if you plan to include high-definition video
files, which require more space on a server and more bandwidth to download).
E-commerce features can also add to the cost of monthly hosting. (Y ou find sug-
gestions for choosing the best hosting service for your site in Chapter 3.)
\^ Domain names: A domain name costs between $8 to $20 per year, depending on
the registration service you use and any special features you request, such as
private registration, which is a lot like having an unlisted phone number. You can
even register more than one domain name for the same site, but only if the name
hasn't already been registered by someone else. (Y ou find tips about, check the
availability of domains, and register your own domain names in Chapter 3.)
\^ Software programs: The tools used to create a Web site can range from free
to expensive. At the very least, consider getting an image editing program
like Adobe Photoshop ($650) or Photoshop Elements ($99; a fine alternative if
you're not a professional graphic designer). For Web design, I find that Adobe
Dreamweaver ($399) is well worth the price. However, Microsoft Expression
Web is also a great Web design program, and Microsoft lowered the price of its
most recent version to just $149. You can use any of these programs with the
templates and lessons in this book. You find a more detailed comparison of
the options to help you find what's best for your site in Chapter 1.
\^ Your time: If you're building a site yourself, one of your biggest costs is likely
to be the time you spend working on it. Don't underestimate the value of your
own time if you run your own business. It may be well worth hiring a student
or an assistant to help with time-consuming tasks, such as adding text and
images to all the pages of your site, or scanning lots of photos and graphics.
Consulting services: Another major cost for do-it-yourselfers is any consult-
ing service you use to augment your own skills. For example, you might hire a
graphic designer to create a logo; an editor to review text; or a programmer to
create complex, interactive features, like a password-protected section where
you keep clients informed as you work on their private projects.
\^ Shopping cart and e-commerce transaction features: If you want a shopping
system, compare the costs of a few and then include a rough estimate until
you make a final decision. (You find recommended services in Chapter 15.)
J**" Traffic reporting services: Most Web hosting companies provide basic traf-
fic statistics about visitors to your Web site, but you will almost always get
more detailed reports if you use a dedicated traffic service, such as Google
Analytics, covered in Chapter 10.
Chapter 2: Planning Makes Web Design Easier 2^
^IVBE/? As you put together your budget, start with the clear-cut costs, like paying for a domain
4y~M\ name and hosting, and then move on to other items specific to your needs and include
your best estimate. After you have a price quote for each element and begin putting the
pief es together, you can distinguish the more expensive features and better decide
s you can afford now and which ones you may want to add later.
Assembling a team
Don't go it alone! The best Web sites are developed by a team of people with a vari-
ety of skills, including writers, designers, programmers, and multimedia producers.
If you're developing a relatively small, simple Web site, you might not need a lot of
people with specialized skills on your team, but the more you can divide the work
among experts, the better. Although the instructions and templates included with this
book are designed to help you do it yourself, you occasionally still have to seek out
specialists — like a good editor to ensure that your text is well written, or a program-
mer who can create advanced features, like password-protected sections of a Web site.
Throughout this book, I've worked hard to give you the best and easiest ways to
create a Web site on your own, but I would be remiss not to point out that hiring a
specialist or two once in a while can be a helpful way to complement the work you
do yourself. Don't be afraid to ask for help if you need it.
Designing \!our Web Site —
No matter how technically sophisticated a Web site is or how creative its writing,
most people notice a site's design first. If you want to make the most impact with
your Web site, make sure that you leave plenty of time or reserve funds in the
budget to develop (or buy) professional-looking graphics.
The best design is one that suits your audience — and that may or may not mean
lots of fancy graphics and animations. To pinpoint the right design for your site,
follow these guidelines:
Before you develop the design, think about whom you want to attract to your
Web site. A gaming Web site geared toward teenagers should look much differ-
ent from a Web site with gardening tips or an online banking site for adults.
Review other sites designed for your target market. A good way to determine
what might work best for your audience is to study similar sites, taking note of
how they use images, set up navigational links, and organize information. You
don't want your site to look exactly like your competition because you want
your site to stand out (and you shouldn't just copy someone else's design),
but you can certainly gain useful ideas from reviewing other people's sites.
W Consider the limitations of mobile devices. Increasingly, people are visit-
ing Web sites from cellphones, looking for things like a new restaurant for
lunch while they're running errands or the address of a business they want to
visit while they're driving there. Mobile devices are a great way to find what
you need, when you need it, but only if the Web site you're trying to visit is
designed to work on a mobile phone. As you create the design for your site,
keep in mind the limitations of small screen sizes and how much harder it can
^0 Part I: Laying the Groundwork
Drop Book
be to click links without a mouse. Today, you have two options if you care
about visitors using mobile phones. Keep things relatively simple so they work
on most devices or create a second, simplified version of your sites specifi-
cally for the mobile phone. To learn more about designing Web sites for cell-
s and other mobile devices, read my upcoming book Mobile Web Design
mmies (Wiley).
Keep in mind how your design decisions might affect download times.
Consider your audience's time constraints, attention span, and (most impor-
tantly) goals. If you design your site to provide information to busy business-
people, you want fast-loading pages with limited graphics, video, or other
multimedia. If you design your site for entertainment, your audience is likely to
wait a little longer for videos and other interactive features.
Creating a consistent design
Most Web sites work best, and are easiest to navigate, when they follow a consis-
tent design. Here's a case in point: Most readers take for granted that books don't
change their design from page to page and that newspapers don't change headline
fonts and logos from day to day. Consistency is one of the primary tools used in
books and newspapers to help readers easily distinguish different elements and
follow a story or theme.
As you lay out your Web page, keep related items close to one another and be con-
sistent about how you design similar content elements. Viewers should instantly
understand which pieces of information are related to each other.
Here are a few good ways to distinguish different kinds of information:
Design: To ensure a consistent style, define a set of colors, shapes, or other ele-
ments that you use throughout the site and then stick to them. Choose two or
three fonts for your Web site and use them consistently. For example, a common
practice is to use the Arial font for headlines and Times for the text in paragraphs.
Then you might use a special font for a logo or for advertising so that it stands out
on the page. Using too many fonts makes anything harder to read and confusing.
You can easily get dazzled by all the special effects you can add to a Web page.
Don't fall into the trap of using fancy features just because you can. ("Look, Ma —
I made the text on my Web page blink in neon pink!") Keep in mind that the most
important thing is to make your photos and Web pages look good and download
quickly on the Internet. A clean, classic design will almost always look more pro-
fessional than a busy design loaded with blinking or animated images.
Location: The position of elements on a page can strongly affect the amount of
attention they receive. Many Internet studies have shown that text and images
toward the top of the page get the most attention, which is why putting your
most content toward the top of the page is best. Some things are commonly
placed at the bottom of Web pages, including copyright information and links
to legal notices, such as privacy information or terms and conditions.
Prominence: Give elements of similar importance the same weight on a page,
and change the prominence based on priority. If all your headlines are the
same size, it's hard to tell what's most important, which is why most news
sites and print publications use larger text for the biggest news stories and
smaller and smaller headlines for less important news.
Chapter 2: Planning Makes Web Design Easier
31
Here's the exception to the rule. Strive for consistency in your designs except when
you're trying to be unpredictable. A little surprise here and there can keep your Web
site lively. A touch of red or a special icon can bring attention to a special section or
fly updated information.
f nevi ly upaa
ook§
Mapping the structure: Organization,
navigation, and (inks
Helping visitors find their way around your site is a critical part of your site's
design. As you start planning the organization of your home page and the main sec-
tions of your site, consider these questions:
When visitors arrive at your home page, how will they find what's most impor-
tant to them?
How can you divide the information in your site into sections?
How will visitors move from one section of the site to another?
W How will you encourage visitors to find the information that you most want
them to find or to take the action you want them to take (such as buying a
product or ordering your services)?
A good way to help answer these questions is to imagine that you're a typical user
of your site. For example, you might say, "If I were a busy attorney who came to my
site looking for a new couch for my living room, what would make it easy for me to
find the color and style I want in my office?" Or, "If I had a shaggy dog that needed a
haircut every week, how could I easily find the scheduling and pricing information
for the grooming salon?"
As you plan what appears on the first page of your site, draw on your answers to
these questions, and revisit the exercise throughout the design process to make
sure that your most important visitors can easily find what they need. In fact, here's
a great practice professional designers use: Create a few profiles of typical users
and then return to these profiles as you design the site.
Designing the home page and main sections
One of the biggest mistakes in Web design is cramming your home page so full of
information that it's hard to find anything. Studies show it's better to guide people
through a series of simple choices with two to five options each, than to overwhelm
them with all options at once.
As you consider what information you want to appear on the home page and how
to organize the information in your site into subsections, think about guiding your
most important visitors through a series of choices. For example, Pamela's Pet
Services site might include a few general service categories on the home page, such
as grooming, boarding, and walking, and then link to subsections that offer more
specific information, organized by the kind of pet or grooming service.
^2 ^ art '■ laying the Groundwork
As you plan your initial site structure, think also about where you're likely to add
content down the road. Be sure to include these considerations in the planning pro-
cess by asking questions, such as these:
>^^site that sells products: What will you do when you have more products
^ ■t^SwKl? Where will you put new lines of products? How will you locate new
product information pages or more detailed descriptions? How will you handle
price changes or inventory fluctuations?
\^ For an online magazine: How will you handle breaking news? Where will you
add new stories on a regular basis? How will you archive old stories? How will
you connect related stories over time?
W For a service site, like my fictional Pamela's Pet Service: Where will you add
new services? How will you add new photos of pets? Where will you include
seasonal specials or discounts?
Whatever you do, never let users "get stuck" on a page because the link is broken or
labeled Under Construction. Good Web sites are always under construction. Let
visitors know that new treats are coming by putting notices on pages that already
have content. You find more about creating links in Chapter 6 and tips about finding
and fixing broken links in Chapter 10.
Setting up navigation links
After you determine how you're going to organize your information into sections on
your site, you've done most of the work needed to create the navigational structure
of your site. Creating a menu bar — or navigation bar — that includes links to each
main section of your site is one of the most important ways you can make your site
easy to navigate. Adding that same navigation bar to every page on your site makes
it easy to access all of the main sections from anywhere within the site.
Here's an example of a navigation bar you might create with a row of links to the
main sections of a small business site:
Home Page ~ About Us ~ Products ~ Services ~ Contact Info
A good Web site is designed so that users can easily access key information from more
than one place in the site and can also move back and forth between the main sections.
As you plan the navigation of your site, make sure that visitors can
Follow different paths to the same important information. Providing more
than one link to the same page can seem repetitive but makes it easier for
visitors to find their way around your site. For example, if you have a family
history section, you might link to that page from pages throughout your site,
such as the page about your daughter's wedding as well as the page about
your grandparents.
DropBo
Chapter 2: Planning Makes Web Design Easier 33
Move back and forth between pages and sections. Links that help users move
forward and backward through a series of related pages can be especially
useful in a slide show or an image gallery.
h your site. If your Web site is packed with content, users are likely to
ciate the ability to search through your pages. One simple solution is the
Google Search tools, which you use for free by signing up at Google.com and
copying a little bit of code from their site to yours. (You find instructions for
adding Google AdSense to your pages, which works much like Google Search,
in Chapter 14.)
Follow the three-clicks rule, which states that no important piece of information
should ever be more than three clicks away from anywhere else on your Web site.
And the most important information — such as contact information — should never
be more than one click away.
Part I: Laying the Groundwork
DropBooks
Chapter 3
Drop&ctfrmli a Domain Name and Web Host
In This Chapter
^ Selecting a domain name
^ Registering a domain name
Understanding how Web hosting works
^ Choosing a hosting service
A schoolteacher once asked me: "When you talk about 'there' on the
Internet, where's 'there?'" I knew immediately what she meant, but I've
pondered her question ever since.
If you're still trying to understand "where" your Web site will live when you're
ready to share it with the world — and how domain names and Web servers fit into
your Web site plans — you've turned to the right chapter. Simply put, a domain
name is the address for your Web site, and a Web server (often provided by a host-
ing service) is a computer with special software that makes it possible for you to
publish your site on the Web.
Although many companies offer both domain registration and Web servers, regis-
tering a domain name is very different from setting up a server to host your Web
site. In this chapter, you find out how these two important aspects of Web develop-
ment work and how to get the best domain and hosting service for your Web site.
In the first part of this chapter, you discover how domain name registration works,
where you can search for domain names to see what's available, and what to do if
the name you want is already taken. In the second part of this chapter, you find tips
about choosing the best Web server so you can publish your site online.
Whether you're creating a Web site for your business, hobby, or family, you'll
want to follow the steps in this chapter to register a domain name and select a
Web server. Taking care of the preliminary steps in this chapter before you start
creating your pages in Part II will help ensure that everything is set up when you're
ready to launch your new Web site.
Finding and Registering Domain Names
The address for a Web site is its domain name, also called the URL or Uniform
Resource Locator. For example, Wiley Publishing, the company that published this
book, has a Web site with the domain name www . wiley . com. The company also has a
Web site with the domain name www . dummies . com, for the For Dummies book series.
Part I: Laying the Groundwork
Even before you start building a Web site, I recommend that you register your own
domain name. The process is simple and painless and costs less than $10 per year
at most domain registration services. If you don't register a domain name, your
Website's address will probably look something like this:
iceprovider . com/users / yourname
If you register a domain name, your address should look more like this:
www. wiley . com
Choosinq a qood domain name
■tJVBEfl Your domain name is your calling card, and the best ones are short and sweet and
easy to spell. If your Web address is too long or complex, it's hard for anyone to
remember or type accurately on a keyboard. The best domain name for your site will
be easy to remember and easy to convey: It can be said in one simple sentence.
A shortened version of your business name may seem like a better choice because it
requires less typing, but if your customers know you by your full name, they may be
confused. For example, I would never recommend a domain such as am- airlines .
com for American Airlines. The official site for American Airlines is www . aa . com,
which is a great domain because the company's initials are well known, and you
couldn't possibly get a much shorter domain name. Because www . aa . com is an
abbreviation, American Airlines was smart enough to recognize it might be confus-
ing to visitors and to register more than one name (it's easy to do); if you type www .
americanair lines . com, your browser goes to the same site.
When you're tossing around ideas for a domain name, keep these rules in mind:
\^ Domain names aren't case sensitive. For example, you can get to my Web
design training site by entering digital f amily . com or DigitalFamily .
com. (See Figure 3-1.) I prefer to capitalize the D and Fin my domain name
when I print it on business cards or other collateral because it makes the
domain name easier to read.
■3 Dlalc*iFam%Mnif) I Free wjto*5cH It* Wet detfg*u Dreamweaver, and ExpreeiSon Web by author Janlne Warner - MoiHIa Fbefox
lit tdt Htfary finakmarkr Icnlr tfdp Gtltfid Lnti
(fif ' Cf X ffii * '.. \ http ■.'/dighsfatnly.com' '.; - ||G|- I
[5igitalfamily.com
Hume Bookstore Mdco; Onenmwczivrr EiqjITTTion Wfcb FrwTitorial? CoolSlirff About Ut
& KgtialFapliy.com I Free tutorials in Web desUgn, Orea*nw*avep h add ExprenfM Web by atrihop Jarta* Warner - Uozilla Fhvta
£ilr Edit >is«* Hijtcty Boolrovtj loot; tdilp Bslitid liriti
hup frTJiflilaiFHtrily.con^
tfigitalf amily
.com
Home Bookstoie Videos Dreaiweaver
Eiuresslon Web
= ree Tutorials Cool Stuff .fitiout Us
Figure 3-1 : Both DigitalFamily. com and digitalf amily . com
take you to the same Web site.
Chapter 3: Securing a Domain Name and Web Host
37
Any characters that appear after a domain name extension are case
sensitive (the dot-com or dot-org part of the address, for example). Thus,
www. DigitalFamily . com/books isn't the same address as www.
DigitalFamily . com/Books.
I uigi
oks
f the leading www depends on how the domain is configured on a server.
You can set up a domain on a Web server to work with or without the www, or
you can set it up to work either way. You can also set up subdomains if you own
a domain. For example, you can find my personal profile at http : / / JCWarner .
com, and you can find the Spanish version at http : / / Spanish . JCWarner . com.
^ The use of the http : / / that appears at the very beginning of a domain name
is optional. Most people no longer type these initial characters when entering a
Web address because they're unnecessary, but it is helpful to include them when
you're writing an address that doesn't include the www. Throughout this book,
when I write a domain that does not include the 3ws, I include the http : / / to
avoid confusion.
Although you can use a hyphen or an underscore in a domain name, it's
generally simpler to use a combination of words run together. For example,
you can register www. digital- family . com, but that's harder to convey
verbally because you have to explain the hyphens in the middle. If you simply
use www . digital family . com, you can say, "My address is Digital Family dot
com, all one word."
Domain names cannot contain special characters. You can't use spaces, peri-
ods, apostrophes, or other punctuation or special characters, but you can use
numbers and dashes.
Make sure that your domain name doesn't violate a trademark. You can do
a simple trademark search at www. uspto . gov. If you're starting a business or
concerned about violating someone's trademark, consult an attorney.
Register your name
I tell all my friends that they should register
their own names as domain names because
"owning" your name is a key part of pro-
tecting your online reputation. A personal
Web site serves as a great way to promote
yourself, whether you're job hunting, devel-
oping a consulting business, or simply want
to share your story with the world. And
because search engines tend to give prior-
ity to keywords that match domain names,
your site should score high when someone
searches your name if you've registered the
domain. And even if you don't plan to use
your domain name right away, registering
it will prevent anyone else from setting up
a site with your name.
I registered my own name, JanineWarner.
com, years ago. When I realized that many
people misspell my first name, though, I
decided to register a simpler alternative.
The domain jwarner.com was already reg-
istered by a gentleman named John Warner
when I got the idea, but he's been nice
enough to keep a link on his site for me. I
finally settled on JCWarner.com because
it's easier for people to spell the domain
using my middle initial than using my full
first name. I know that even if someone
misses the C in my domain, they still have
a good chance to find my site thanks to the
link on John's site. (Thanks, John!)
Part I: Lavinq the Groundwork
Searching for an available domain name
You_can register any domain name that hasn't already been taken by someone else,
t whether a name is already in use is easy — and free. To see whether
ame is already registered, do a simple search at any domain registra-
tion Web site. All domain registrars check the same master databases that track all
domain names on the Web. Hundreds of sites offer the service; the following steps
use Domain.com as an example, but most work the same way:
1. Use a Web browser to visit a domain name registrar.
In this example, I'm using Domain.com (www. domain . com).
2. In the Search area on the registrar's site, type the name you want to register.
In Figure 3-2, I'm searching for www . petservice . com.
3. Click to begin your search.
The results of your search are displayed. (If you use Domain.com, for example,
you'll see a list that includes the name you searched for, as well as a list of
variations. Most common names and phrases have already been registered, so
it's no surprise that the status next to the name petservice . com shows that
it's already taken. If you scroll down the list of alternatives shown in Figure 3-2,
you see that petservice . us is still available, as is thepetservice . net.
4. If the name you want isn't available and you don't like the alternatives
offered, you can enter another name to see whether it's available.
Domain registrars don't limit the number of names you can search for in any
given search session.
|3TKii=
F,u Frit
ir a Domain. Ffad Hotcaan and Croats a Wntaite a: Dmnain.cnn-, '.lojilli hi-ti>
£rit i«w 1-ldDiy ficricmiritr Jptii dsfc Brlrttd Lmfcr
C ^ ^ Nip:-, ft 5 mi*, domain. CGrwddiJrtndt-jL [tip
= ~\
O r daman regntialim P -."J
pHMdMCC-.nH
I-- ■.
TAh£H
itate-oifei
TAh£H
|_ prt>««.1r
AVMLMLE
DVMLMI
[; i ss
JlVJOLflaLE
[1 1 ss
TAIDI
17 .M
Uraxwn
|" f*4»e<Atv>t**
1VM.AHE
MH1E
pMte
**M.tM.t
tseno
iwciEJ
RKONHMXDOOWWS
~i - 1 — .-■ r
■:|.vii-.
Mrf ■ Yr
ISSS
iTjSfH D
fSK
Fl p»taf1hi*iji«1
tssa
pass
WW
I (iy<h4n»totMtrcvcwT>
4TMKP.I
: ■ -
I wcbpn4*i.ppL hi*
4VM.AH.E
I fc***r *)■:«■,< h-
4VM.AH.E
4VM.MLE
:-■ ■■.
a
A4J>lMlE
i .■ -
r a 9 m 0
S E _E C TE D CC MAIh
Figure 3-2: If the name you want isn't available, most registrars, such as
Domain.com, offer a list of recommended alternatives.
Chapter 3: Securing a Domain Name and Web Host 3^
Don't get frustrated if you find that the domain name you want is already taken. You
can almost always find a name that will serve you well if you get creative and try a
few variations. Here are a few tips for finding a suitable variation:
Drop Books
*a word or phrase that indicates geographic location or makes the name
specific. For example, if www . news . com is taken, consider using www .
PointReyesNews . com or www . WestMarinNews . com.
Sometimes a different name that has similar meaning can work. For example,
if every variation of news is taken, consider registering a similar name, such as
www. PointReyesReports . com.
\^ Try looking for playful names. For example, www . Accountant . com is
taken, but you might still find www. FunnyAc count ants . com or www.
FrugalAccountants . com.
Before you choose a close variation (or any domain name, for that matter), always
check for sites whose names are similar to yours. It's generally not a good idea
to choose a name that's too close to someone else's if that person is a competi-
tor or runs a site you would be embarrassed to be associated with. Similarly,
consider whether others have already set up sites with your domain name but
a different domain name ending. It may seem like a good alternative to regis-
ter FrugalAccountants . net if the . com version is already taken. However,
because the . com ending is more common, you're likely to lose customers to
FrugalAccounts . com if they offer a competitive service. If you really want
a domain name that's been taken, check out the sidebar, "Disputing a domain
name," later in this chapter, which explains how you can purchase a domain
name that has already been registered from the owner (if he or she is willing
to negotiate).
Understanding topAeVel domains
When you search for a domain name, you need to determine not only the first part
of the name but also the ending, commonly called the top-level domain, or TLD.
Table 3-1 provides a list of the most common domain name endings, their intended
purposes, and their restrictions.
The . com domain has emerged as the most valuable because it's the best recog-
nized and the one that people are most likely to remember. However, all these
domains work the same way in terms of directing users to a Web site address. For
example, www. smith, com, www. smith.net, and www. smith, org work the same
way on the Internet and are used by three different Web sites.
The number of domain endings has been growing, and there are proposals to make
the options nearly unlimited. Table 3-1 provides a list of the most common domain
unrestricted names as well as the original list of restricted names. (ICANN controls
all domain names and; only an entity that's approved to use a restricted ending can
set up a domain name with that ending.)
Part I: Laying the Groundwork
Table 3-1 Domain Name Endings
DropBo
Top-Level
Used By
Restrictions?
ess
Commercial organizations; by farthe most popular domain
ending
No
. net
Internet services; used increasingly by people who don't get
the .com names they want
No
. org
Nonprofit organizations
IMO
. biz
Businesses; a newer domain, used increasingly by busi-
nesses that don't get the . com domain names they want
IMO
. name
Individuals
No
. info
Informational sites
No
. mobi
Mobile sites
No
. aero
The air-transport industry
Yes
. coop
Cooperative associations
Yes
.museum
Museums
Yes
. gov
The United States government
Yes
. edu
Accredited colleges and universities
Yes
.mil
The United States militar\
r
Yes
Comparing country domains: ,tV f ms, and .Ws
Nearly every country in the world now has its own domain, such as . us for the
United States, . am for Armenia, . br for Brazil, . uk for the United Kingdom, and
. zw for Zimbabwe.
A few foreign country codes have become popular in the United States because
they represent common acronyms, such as . tv. Many folks mistakenly assume that
. tv stands for television, but it's really the domain name for the country of Tuvalu.
Similarly, . ws is often assumed to mean Web site (and is even listed that way on
some registrar sites), but it's really the country code for Western Samoa. You can
register a name with the . ws or . tv domain even if you don't live in one of those
countries, but some countries have restrictions, and country domains are generally
more expensive to register than names that use . com, . net, or . org.
Registering your domain name
The specifics of registering a domain name vary among the services, but the basic
domain registration process is similar. Typically, after you perform your search,
you're given instructions for registering the name, as well as offers to buy other kinds
Chapter 3: Securing a Domain Name and Web Host
of services, such as Web hosting. You should never have to purchase additional ser-
vices to register a domain name, but many companies offer discounts if you order
multiple services. Common types of services, in addition to registration, are
Dropflgpote
ing: Many registration services also offer Web site hosting (covered later
s chapter).
E-mail: Typically, you have the option of creating one or more e-mail
addresses associated with your domain name, but e-mail set-up is often better
handled through your Web hosting service.
Privacy: Most services allow you to choose whether your contact informa-
tion as the owner of this domain name is readily available to others through
a search on the Whois database (http : / /www . whois . net). Most services
charge a fee for private registration, which is kind of like having an unlisted
phone number.
Disputing a domain name
What if your name — either your personal
name or your company name — is already
taken, and you want to have it (or don't like
what someone else is doing with it)?
Unless the owner has opted for private
registration, you can find out who owns
a domain name by searching the Whois
database, a central registry of all domain
registrants on the Internet. Most domain
registration sites include a More Info link in
the results page if you search for a domain
name that is already taken. Registration
listings in the Whois database include the
street address, phone number, and e-mail
address of the person or business that
registered the domain name in addition to
information about the server or service pro-
vider that hosts the domain.
If you have your heart set on a domain
name that is already registered, you can
contact the owner and try negotiating.
Many people have registered names that
they aren't using, and if you find one that's
registered but not in use, the owner might
be willing to sell. I know many people who
have picked up great domain names for
$500 to $1,000, but some names have sold
for as much as $1 million.
There is no clear set of rules about the value
of a domain name, but there are services at
registrations sites, such as www.godaddy.
com and www.1and1.com, that will appraise
a domain name or even broker an offer to
the current owner.
To date, the courts seem to be apply-
ing the same laws to domain names that
they apply to trademarks. For example, if
you have a legal trademark such as Levi,
and someone registers www.levi.com
before you do, you can probably go to
court and force the person to give you the
domain name, although domain name
disputes can be lengthy and expensive.
If you don't have a trademark, you may
have no alternative than to try to buy it
from the person or choose another name
instead.
If you think you have a case against some-
one who has taken your name, don't bother
the registration service with your complaint.
Domain registrars don't handle domain
name disputes; they just register names on
a first-come, first-served basis. Instead, talk
to the guilty party directly. If that doesn't
work, take the matter to court. If you can get
a judge to rule that you're right, the domain
registration service revokes the name and
lets you have it.
2 Part I: Laying the Groundwork
— ^ ■— ^ those dom;
Drop Books
In addition to registering your main domain name — the one you plan to hand
out to colleagues and clients or friends and family — my best advice is to regis-
ter every variation and misspelling of your name that you can think of and direct
thosje domain names to your Web site. Just because some people didn't do well in
rade spelling bee doesn't mean that they don't have money to buy your
r services online.
Directing more than one domain name to the same Web site is a relatively simple
technical detail that you can arrange through your Internet service provider (ISP)
or the company where you register the name. And, it's not that expensive. At
the time of this writing, GoDaddy (www. godaddy . com) charges $9.99 per year,
Network Solutions (www. networksolut ions . com) charge, $14.99 per year, and
l&l (www. landl . com) charges $5.99 per year.
Also consider registering the same name with different domain endings, such as
. org, . net — and, most important, . com. The educational Web site Whyville, for
example, registered whyville . org (the domain ending used by most nonprofits),
but it also registered whyville . com because many people will assume that's the
address. Owning these additional domains can also prevent you or your visitors
from potential embarrassment or misrepresentation.
Most people consider the . com version of a name the most valuable, but if the . com
version is unavailable, registering the . net, . biz, or . info versions may be a fine
alternative. Just make sure that the site that has the . com version isn't a direct com-
petitor or a site that you would be embarrassed by if your visitors found it accidentally.
Technically, when you register a domain name, you are leasing it, not purchasing
it, which means that it's possible to lose a domain name. Make sure that your regis-
tration remains valid by renewing it when your registration service requires. Many
registrars offer auto-renewal options and discounts for registering a name for two or
more years in advance.
Choosing a Web Hosting Serf/ice
Choosing a Web host is a little like choosing a cellphone company or a long distance
carrier. In theory, all phone companies provide the same ability to make a phone call,
but in practice, they offer different rate plans and different levels of service.
For the purposes of this book, I'm going to assume that you don't want to run your
own Web server, which would be kind of like starting your own phone company
when all you need is long-distance service. Unless you're running an extremely
large Web site, you should definitely look for what's called "managed hosting."
Essentially, when you sign up with a Web host, you're renting a small portion of a
big computer (a Web server) that's connected to the Internet. The host gives you
access to your part of that computer's hard drive, and when you transfer your Web
pages to their computer, they are "served" to the Internet.
Although you can use the same service to host your site that you used to register
your domain name, I've had better experiences with companies that make Web
hosting their top priority. For example, Liquid Web (as shown in Figure 3-3) offers
24/7 phone support, a service you won't find at all Web hosting companies.
Chapter 3: Securing a Domain Name and Web Host
1 Dsdlcacad Servers I Ms a god Dadicalua Sutvur,| Wab flostmrji WS I Llqald Web ■ Mrcila Flrufcix
fjfe Edit ftw r-f^nry lr?ritmirkr lortj tHU £rlitadLinfcr
Back Forward - Relo^ Hnmn Du^nloadHylftif - I g Wrpi^Aw^ JquL^h.gDwr?i^m_EDrtr^hBlJirtiri_g[ ^ lE5-|e«%to P 310,0
DropBo™
^ liquidweb
Call Nrjw MO,58D,i9ft5
p i D-d le 1 3 i up p-a i h p^rb-dir: c-irAdcl
kjtted Hoiting Wet Hoiti*i<p 1>i1<mI (Ni^te Se*vei^ CMj C*o(*^i
Heroic Support
tjMi m(K"t its" li :p-*irt Zi hn
E.*^jJ kT MT-C-U I I'M
Liquid V#b Advantage
Explore mx ewclusiw lealum and Servian*
Sonar " Monitoring
ServerSecure
Hemic Support
24-7. J* 5 tern *>
mluuUen.
pra&*i p*td-+n »Td
. ■ .L- bAh.
vttiki Hail
Figure 3-3: Look for a company that makes Web hosting a priority and
offers good technical support.
If you're looking for one of the cheapest Web hosting services, consider l&l or
GoDaddy, both offer domain registration and a variety of low-cost Web hosting
options, for as little as 4.99 per month. If you want to use one of the best hosting
companies I've found to date and you're willing to pay between $25 and $100 per
month for an account, consider www. rackspace . com.
So how do you find a Web host with the features you need for your Web site? And,
how do you even know what to ask?
Before you select a Web host, consider what you want on your Web site and make
sure that you find a service that meets your needs. Your goal is to find the provider
with the best collection of services within your budget. The following sections high-
light a few questions to ask as you explore your Web hosting options.
Finding the best host for your site
My best advice is to get a good start on the development plan for your site before
you shop around for a service provider so that you know which kinds of services you
need. (You can find more information about planning a Web project in Chapter 2.)
You might decide, for example, that you want 24-hour technical support so that you
can get help at night after work, but you don't want to pay extra for secure financial
transactions because you don't plan to sell products online.
Here are a few of the common features to consider as you select a Web hosting
service:
J** Bandwidth: Bandwidth measures the carrying capacity of a connection on the
I Internet. Compare bandwidth with a garden hose and its capacity to transport
I water: the larger the diameter of the hose, the more water it can carry. Bandwidth
works the same way: the greater the bandwidth, the faster the transmission of
Part I: Lavinq the Groundwork
DropBooks
sound
information. Bandwidth gets expensive if lots of people visit your site because
more visitors mean more use of the connection. If you want to offer streaming
video or audio files, they can also use up a lot of bandwidth — and that means
you'll have to pay a premium for hosting.
fpace: The bigger your site — the more images and especially the more
files, video, and animation files you include — the more you'll pay for the
disk space to host it. Because video files are much larger than images or text files,
video takes up much more hard disk space and requires more bandwidth to be
viewed. As a result, providing many hours of video on your site can be expensive.
E-commerce: Some Web hosting packages include secure e-commerce capa-
bilities and sophisticated programming options. Unless you're planning to
sell products or services on your site or to publish large amounts of video or
sound files, you'll probably do fine with the simplest or lowest-level Web host-
ing package your service provider offers.
Blogs and other third-party services: You can install blogging software, such
as WordPress (covered in Chapter 1 1) on almost any Web server, but many
hosts include a feature that makes it easy to install blogging and other soft-
ware. Some call this one-click services; others use a program called Fantastico,
which is included in your Web hosting service. The advantage is that it makes
it easy to set up a blog (and many other programs) on your own server, which
is something that can get complicated if you have to do it yourself.
Unix, Linux versus Microsoft Web hosting: Some service providers use Linux
server software; others use Microsoft. If you use the templates included in this
book, either type of server should work fine, but if you create a WordPress
blog or other service or system that requires programming language, you'll
want to make sure your server supports it. The most common technologies
used in the Web these days are PHP, JSP, and Perl, which work well on Linux
servers, and ASP or ASP.NET, which work only on Microsoft servers.
W Streaming media: If you want to offer audio, video, or Flash animations on
your Web site, check whether your hosting service features the ability to
stream your multimedia files. It's a nice option: Streaming is what enables site
visitors to start playing a video or audio file while it is downloading, instead of
having to wait for the entire file to download before it can start. Keep in mind,
however, that you can use a third-party service to host your video, avoid-
ing the potential cost and challenges of hosting video on your own server.
YouTube offers free hosting for short videos and it's easy to insert videos
hosted on YouTube on your own pages. You'll find a slightly higher-level
service from Vimeo (www. vimeo . com). (You find more information about
these and other services in Chapter 13.)
If your Web host sets a limit on bandwidth usage, you can end up with a big,
unexpected bill if a video or audio file on your site becomes very popular. For
example, I have a client on a premium Web host that offers excellent service
but sets a limit on the bandwidth included in their monthly fee. If just one of
their high-quality videos got popular enough to attract a million visitors in one
month (which is not so unusual on the Web), they could get hit with a $12,000
bill, just for that month of video hosting. That's why I recommend a dedicated
video host for anyone who does video on their Web site. With www. vimeo .
com, one of the most popular video services, you upload your videos to Vimeo
and then simply copy a piece of code to your own site and then it plays within
the page on your Web site. (You learn more about video hosting services, such
as Vimeo and YouTube, in Chapter 13.)
Chapter 3: Securing a Domain Name and Web Host
Setting up e-commerce service
Many Web
DropBoate
online, vou
Many Web hosting services, such as those provided by Yahoo!, as shown in Figure 3-4,
commerce features in addition to hosting and domain registration all in one
u're thinking of starting a business or taking your existing retail business
, you want to make sure your service provider can handle e-commerce trans-
actions. If you plan to sell a lot of products, I also recommend using a shopping cart
system, which is a program that enables visitors to add products to a checkout page
that tracks and tallies selected items as a visitor moves through your site. You can
buy shopping cart systems separately, but many service providers (such as Yahoo!)
include shopping cart features as part of their online store services. (You can find
more information about selling products on the Web in Chapter 14.)
■± T ilio: : ViirCla-l Lillians I
r an EcDmnsarca ElL5lrw:c ■ Manila Hrufax
fjlt Edt irf history fiprtminVs IddIi tfcb Edited Lint;
0scL r .irwnnj - RbIdptJ " Hgqip prmi-JriiiHI-y pm Tf* h||p:A'y-ntdlbujint;.;.'r'-5hnn sonv?nc'-™-nt<£e> 1
—
1
^JlHOOJ small business £^
aooauni .niol
• Qr . vrvJI busing P Sk N ,H
h'Hib hbitng I
eh I DcfTinni I Euiinyu Emil I S-ijieIi EngrHj Mirk-ibng
Sail or lire Tilth Yahoo! Marctiant SoIlUjckis—
HbsMn mniE Lap 5Q0 HerneH Prtalcra Ihnn any ether tcanmefce ptDnderl
Design Taijlp
Bimyllil-q yuu mcM ii j' vi'ainiMCH hIuUik
Ciyyb a -dam with ayyf-k-Lriu tialt. nrhini a dyvhlupyf.
PraduEtlrrfb
Billnp
Pracciilno
- - ■!
isf~ is 1 1 5- !
■r^Jrt[/* 1 1-iH id J lhTii- ill ra Irtlf' intryyyy fuui £ Slyi ^ i Lhiiilli WVI
■■ .kiiijihii 1:1:11 Millie :i: m- i n 1 1 1 ■ i l-Kl.ilili;lii!.lh:iiiniirEi
MtTdtitri 5ia*»r Plan
$39
■> 1 3T luiudiiii Hi
i ii ii in ' run [
Haw da It chru rHttrT
Can! Mt turTU k-:*f(Bi;'
Hd",' * I set 1.0 lYf rW*Ti*p:t
rkqryT
Canl Hit i ieiKtay<i a uuh nr
lloni?
□nn?
Figure 3-4: Some Web hosting services, such as Yahoo!, provide e-commerce capabilities.
Hosting multiple sites With
different domain names
As you compare options, you might notice that some providers charge more for
packages that enable you to host multiple domain names. You might choose a pack-
age that supports multiple domain names if you want each member of the family to
be able to register their own domain name and set up their own site separately or if
you run multiple companies or information sites. For example, you can set up www.
JeanDoher ty . com, www . JoshDoher ty . com, and www . TheDoher tyFami ly . com
as separate sites on the same account if it supports multiple domains. Although
a Web hosting package that supports multiple domain names is generally more
expensive, it might save you money compared with the cost of setting up a different
Web hosting account for each Web site you want to create.
0 Part I: Laying the Groundwork
Note the difference between hosting multiple domain names that point to different Web
sites, as in the example in the preceding paragraph, and pointing two or more domain
names to the same site. If you want two names (such as www. TheDohertyFamily .
comBind www . TheDoher tys . com) to direct visitors to the same site, you can manage
uQon with your domain name registrar and save the cost of a premium Web
a^rount that supports multiple domain names. Check with your domain name
registrar for more information on how to forward multiple domain names to the
same Web server.
Chapter 4
DropBootfederstanding Web Design
In This Chapter
Understanding Web design and layout options
^ Exploring HTML and XHTML
Styling Web pages with CSS
I n the early days of the Web, designers were limited to a few simple page layout
I options — you could center your text and images, or leave it all aligned to the
left. As HTML evolved, creating great, more complex Web designs became possible,
but finding the best solution became a lot more confusing.
If you've done any Web design in the past, you may have used tables, frames, or
layers to create page layouts. Today, all those options are considered outdated and
are generally no longer recommended except in very special cases.
Today, most professional designers agree that the best way to create a Web page
design is to use XHTML (extensible HyperText Markup Language, a strict form of
HTML) with Cascading Style Sheets (better known by the acronym CSS).
If you're starting to worry that this book is getting a lot more technical than you
expected, relax. I assure you, you don't need to learn any advanced programming
to create a Web site with the templates included with this book. That said, I find
that many people like to know more about how all this works, and that's what this
chapter is about — helping you better understand the choices, why CSS is better
than almost any other design option and how CSS and XTHML work together.
If you're ready to dive in and start building your Web site right away, feel free to
jump ahead to the chapter and templates for the site design you want to create. You
can always come back here for more details later.
HTM-tfhat> Exploring HTML and XHTML
Contrary to popular belief, HTML isn't a programming language. Rather, it's a mark-up
language: That is, HTML is designed to "mark up" a page, or to provide instructions
for how a Web page should look. HTML is written by using tags, markup instructions
that tell a Web browser how the page should be displayed. For example, to make a sec-
tion of text italic, you use the HTML tag <em>, which stands for emphasis. Most tags
in HTML include both an opening tag and a close tag, indicated by the forward slash /.
Thus, to make the name of this book appear in italics, I would write the code like this:
<strong>Web Sites Do It Yourself For Dummies . </strong>
Part I: Laying the Groundwork
Building, testing, and publishing a Web site
Drop 3ooks
building a Web site involves
e page (often called the front
page) that links to other pages representing
different sections of the site. Those pages,
in turn, can link to subsections that can then
lead to additional subsections or individual
pages. After you create a Web site, you can
test all the links on your own hard drive
and then upload the pages to a Web server
when everything is ready and working well.
You can read more about Web servers in
Chapter 2 and how to upload your pages to
a server in Chapter 10.
XHTML is a more strict version of HTML that is the recommended language to use
to meet the highest standards of Web design today. Among the differences between
the two languages, XHTML must be written in lowercase letters; in HTML, it doesn't
matter whether tags are upper or lowercase. Similarly, XHTML requires that all tags
include a close tag (more on that later in this chapter.) Rest assured all templates
and code examples in this book follow the XHTML standard.
To see what the code behind a Web page looks like in most browsers, choose
ViewOSource. If you're using Dreamweaver, as shown in Figure 4-1, you can click
the Split button (upper-left corner of the workspace) to see the code and the design
areas of the program at the same time in Split view.
Split view in Dreamweaver is a useful way to keep an eye on what's going on behind
the scenes and, as a bonus, you can learn a lot of XHTML as you go along.
Dreamweaver offers three view options:
is 0 Code: In Code view, you see only the XHTML and other code.
Split: In Split view, the page is divided so you can see the code in one part of
the workspace, and a view of the how the page should be displayed in a Web
browser in the other part.
is 0 Design: In Design view, you only see the page as it should be displayed in a
Web browser.
In Dreamweaver's Split view, Code and Design views are completely integrated, so
if you select something in Design view, like the headline you see in Figure 4-1, the
same text is highlighted in Code view, making it easy to find your place in the code.
If at first glance you think that XHTML code looks like hieroglyphics, don't give
up too quickly. With just a little training, you can start to recognize at least some
common tags, like the <hl> tag (heading 1 tag) that was used to format the head-
line on the page shown in Figure 4-2.
To help distinguish the code in a Web page from the text, Dreamweaver displays the
tags in a contrasting color, usually blue. You can change the size, color, font, and
other features of the code in Dreamweaver's preferences.
Chapter 4: Understanding Web Design ^
to view this
index.html*
tainiH-wCTfr common. ess front. ess urchin. js snap_shots.js
deJ^j^lU ^JJ Design _fj Live View ▼
ijaiv ■ ia="ma±nuoiiLeiiL
id-" dr.:- awwa tw^l
Title: DigitalFamily.com | Free tutori; ^ ^ HI^, f^x, |J»
<hl>Welcome -to -my -Digital •Family</hl>
<p><img • src=
" Janine-Warner/ Janine-Warner-Total-Training . gif " ■ alt=" Janine • p
Warner" -width="191" -height=" 180" -class=" f ltrt" 7>Hi, -I'm-
Janine -Warner, -author -of -more -than -a -dozen -books -about • -the •
Tntprnpf -anrl • a • n rnwi nn -rnl Iprtinn -nf -f rsi ni na -\n rlpn=i • ^nd • f rpp
1150 1200 1250 1300 |350 |400 |450
I
1 Digitalfamily.com
Home
Bookstore
Videos Dreamweaver Expression Web Free Tutorials Coi
t do you want
earn today?
Adobe
Dreamweaver
I
elcome to my Digital Famil
!
Hi, I'm Janine Warner, author of
more than a dozen books about the
Internet and a growing collection of
training videos and free tutorials.
On this site, you'll find:
<body> <div#container> <div#mainContent> <div#dreamweaver>|<hl>|
100% " 760x331" 193K/28sec Unicode (UTF-8)
Select this
Figure 4-1 : Use the Split view option in Dreamweaver to display the page
design and the code behind the page.
H1 tag
<div ■ i,
s eamwe aver">1
>Welcome -to -my -Digital -Family</hl>
^p><img • src=
"Janine-Warner/ Janine-Warner-Total-Training .gif" • alt =" Janine
Warner" -width=" 191" -height = "180" -class=" f ltrt" 7>Hi, -I'm-
Janine -Warner, -author -of -more -than -a -dozen -books -about -the ■
Figure 4-2: A heading 1 tag highlighted in Dreamweaver Code view.
A few points to help you better understand XHTML:
In XHTML, all tags must include the closing slash. A few tags can stand alone,
such as the <br / > tag, which adds a line break. XHTML tags must have a
closing tag, even if there is only one tag, and close tags always contain a for-
ward slash (/). As a result, the line break tag in HTML looks like <br>, but in
XHTML, it looks like <br />.
XHTML includes many tags that are designed to be hierarchical. Examples
are the <hl> through <h6> (heading 6) tags, which are ideally suited to for-
matting text according to its importance on a Web page. Reserve the <hl>
tag for the most important text on the page, such as the top headline. <h2 > is
ideal for subheads or secondary headings, <h3> for the third level of headings,
and so on. A headline formatted with the <hl> tag looks like this:
<hl>This is a headline</hl>
Part I: Laying the Groundwork
Drop 3o
HoW Web browsers Work
s such as Internet Explorer,
le, and Safari are designed to
decipher HTML, XHTML, CSS, AJAX, and
other code and display the corresponding
text, images, and multimedia on a com-
puter screen. Essentially, browsers read
the code in a Web page and interpret how
the page should be displayed to visitors.
Unfortunately, because Web browsers are
created by different companies and the
code they display has evolved dramatically
over the years, not all Web browsers dis-
play Web pages the same way. Differences
in browser display can lead to unpredict-
able (and often frustrating) results because
a page that looks good in one browser may
be unreadable in another. For more infor-
mation on browser differences and testing
your pages to make sure they look good to
all your visitors, see Chapter 10.
W Some tags are more complex, and the open and close tags don't always
match. More complicated tags, such as the tags used to create links or insert
images into pages, are more challenging to use because they include link infor-
mation, and the close tag doesn't always match the open tag. For example, the
code to create a link to another Web site looks like this:
<a href = "http :/ /www. digitalf amily . com" >This is a link to
DigitalFamily . com</a>
At its heart, XHTML is just text, and believe it or not, you can write XHTML in a plain-
text editor as simple as Notepad, SimpleText, or TextEdit. If you ever try it, however,
you have to be careful to type all the code perfectly because there is no room for
error or typos in XHTML. After writing code yourself, even to create a simple page,
you're sure to quickly appreciate programs — such as Dreamweaver — that write
the code for you.
One of the great advantages of using Dreamweaver is that you can specify format-
ting by clicking buttons or using menu commands, and Dreamweaver takes care of
writing the XHTML code for you. For this and many other reasons, I chose to use
Dreamweaver in this book.
If you prefer to use Expression Web, a similar program created by Microsoft, you can
apply most of the instructions in this book to that program, although some of the
menu items and other features are located in different places. If you do choose to
use Expression Web, you can download specially created templates and instructions
for creating all the template designs in this book on the companion Web site at www .
DigitalFamily . com/diy.
Comparing Tables, Frames, and Layers
If you've already done a little Web design, you may be wondering what happened
to some of the old ways of creating Web page layouts. For years, Web designers
used the HTML feature called Tables to create page layouts. Then, Frames came
along, and many people were excited by the ability to display multiple pages in one
browser window, which is possible when using Frames and iFrames. Then came
Layers, which were especially popular among designers because they seemed to
offer precise design control.
Chapter 4: Understanding Web Design ^ J
Over the years, all these options have become less desirable except in a few special
cases. In this section, you find a quick review of when Tables, Frames, and Layers
may still be useful.
renting page designs With HTML Tables
In the early days of Web design, most page layouts on the Web were created with
tables. By merging and splitting table cells, and even adding background images, you
can create complex Web designs with tables. CSS expands upon this concept by adding
many new design options, including the ability to precisely add margins and padding
around elements, and better control how and where background images appear.
Cascading Style Sheets, better known by the acronym CSS, also enables you to keep
formatting information separate from content, making it possible to use less code
and create pages with smaller file sizes that download more quickly. Using CSS also
makes pages easier to update because you can change formatting in a more stream-
lined way. You can read more about CSS in the upcoming section, "Designing with
Cascading Style Sheets."
Figure 4-3 provides an example of an old-school site created with the HTML table
tag. To help you appreciate how this page was created, I altered the original design
to display the table borders although most designers turn off table borders when
using tables to create cleaner layouts. Setting the table border to 0 (instead of 2 as
I did here to show you the borders), makes it possible to turn off the border of a
table so that it doesn't interfere with the design.
If you visit the site at www. chocolategamerules . com, you can see how this same
page was created using div tags and CSS. (I explain how div tags work within CSS in
"Designing with Cascading Style Sheets" later in this chapter.)
3 1tauChDnriat*Gim*.H3.'ilN
V i1n>
File frit icw H&dw Ipricmirfcr
IdcK] tfcrp flirted Lint;
Rriaod
■ I- i- ■■■ ■ ■■ i
p Skypu
Game
31
Tn p l.iy npcin a □ at Tl at choc □ latfts .
they're easier to move down your face.
The goal is bo get the chocolate from
yourromlinad to your rnnurti without
your hands.
Figure 4-3: In the old days, the only way you could create a complex Web page design
was to use an HTML table to control text and image placement.
^2 ^ art '■ laying the Groundwork
DropBoercs
Although tables are no longer recommended for creating page layouts, they're still
considered the best way to format tabular data like you'd find in a spreadsheet pro-
gram. That means that you can use tables to format a consistent collection of infor-
mation, such as the photos and names in the list of winners from the Chocolate
s site shown in Figure 4-4.
Although I recommend that you redesign sites like the one shown in Figure 4-3 with
CSS and div tags, I do understand that many designers still find it easier to create
layouts with tables, and not everyone has time to redesign their Web sites right
away. I have to admit, I've been guilty of leaving a few sites online designed with
tables long after I knew better. That said, I recommend using only CSS today for all
your Web page layouts except when you are creating a layout for tabular data. Even
then, I still urge you to use CSS to add any styling, such as background colors or
padding, that you might want in your tables.
File fjjft yew H&dw Ipricmirkr Jprii tfefci £ilited Lintr
Back r r-r**id » Ralcid Hnroc D^MTlnadHelpni
Figure 4-4: Tables are still considered the best way to display tabular data
like the information on this contest page.
Considering design options With HTML frames
You won't find any instructions in this book for creating Web sites that use frames,
such as the Pink Flamingos site shown in Figure 4-5. Frames enable you to display
multiple Web pages in one browser window. Among Web designers, Frames are a
little like those plastic pink flamingos stuck in the front yards of so many homes in
South Florida; some people love how kitsch they are, and others just think they are
tacky. Although Frames are still used on the Web, most designers don't like them
because they can make navigation confusing.
Chapter 4: Understanding Web Design
Frames are also problematic because when you use frames, the URL at the top of a
Web browser does not change, even when you click links and change the pages dis-
played within frames. As a result, you can only bookmark, or create a link to, the first
J paste of a site that uses frames. Worse yet, frames make it harder for search engines
^) (3 T^^^ P ro P er ^' wmcn can diminish your search engine ranking.
3 FirfcHjiM Vn.nl ah Kill-:
£ifc tut K3my Ipcfcmirfcr Jpdi tfcti £rlrtnd Lint;
^^\^ J Q Pink flamingos
1
p 5 ■ ■
Figure 4-5: Frames enable you to display multiple Web pages in one browser window.
Using Layers (or AP Di</s) to create designs
Dreamweaver MX, MX 2004, and 8 had a button for the layer feature, and it offered
an easy way to click and drag boxes using divs that were positioned with precision
on a page. In later versions of Dreamweaver, the name was changed to AP Divs.
Divs are simply XHTML tags that serve as dividers in a page. Essentially, they create
boxes around content that make it easier to position sections of text or images
independently. Don't be confused by the fact that I (and most other Web designers
today) recommend using Div tags with CSS to create your page layouts. We just
don't recommend that you do so with the AP Divs.
AP Divs, as the name implies, are Div tags that include styling information that
adds absolute positioning. That means that when you place an AP Div in a Web
page, it stays where you put it, no matter how much space you have in the browser
window. That may seem like a good idea at first, and AP Divs were popular among
some designers for a while because they are so easy to use and so similar to many
of the features in desktop publishing programs (such as Adobe InDesign). But
because layers create such inflexible layouts, they don't adapt well to the changing
environment of the Web where different sized monitors and other display varia-
tions can lead to text getting cut off and other undesirable results.
Part I: Laying the Groundwork
To cut down on the confusion caused by the term layers, Adobe changed the name
of this feature from layers to AP Divs (short for Absolutely Positioned Div tags) in
later versions of Dreamweaver, including CS3 and CS4. Many designers use AP Divs
on occasion to add fixed position elements to a layout, but creating an entire design
iQsature is no longer recommended.
Designing u/ith Cascading Style Sheets
The concept of creating styles has been around since long before the Web. Desktop
publishing programs (such as Adobe InDesign) and even word processing pro-
grams (such as Microsoft Word) have long used styles to manage the formatting
and editing of text on printed pages. When using styles in a word processor, you
can create and save styles for common features, such as headlines and captions. In
print design, styles are great timesavers because they enable you to combine a col-
lection of formatting options (such as Arial and bold and italic) into one style and
then apply all those options at once to any selected text in your document by using
only a single style. The advantage is that if you change a style, you can automati-
cally apply the change everywhere you've used that style in a document.
On the Web, you can do all that and more with CSS because you can use style
sheets for even more than just text formatting. For example, you can use CSS
to create styles that align images to the left or right side of a page, add padding
around text or images, and change background and link colors. You can even create
more than one style sheet for the same page — say, one that makes your design
look good on computers, another for cellphones, and a third for a printed page.
For all these reasons (and more), CSS has quickly become the preferred method of
designing Web pages among professional Web designers. One of the most powerful
aspects of CSS is how you can use it to make global style changes across an entire Web
site. Suppose, for example, that you create a style for your headlines by redefining the
<hl> tag to create large, blue, bold headlines. Then one fine day, you decide that all
your headlines should be red instead of blue. If you aren't using CSS, changing all your
headlines could be a huge undertaking — a matter of opening every Web page in your
site to make changes to the font tags around your headlines. But, if you're using CSS in
an external style sheet, you can simply change the style that controls the headline in
the style sheet, and voila! Your headlines all turn red automatically. If you ever have to
redesign your site (and believe me, every good site goes through periodic redesigns),
you can save hours or even days of work if you created your design with CSS.
Appreciating the advantages of CSS
A Web site designed with CSS separates content from design. Keeping the site
content (such as the text and headings) separate from the instructions that tell a
browser how the page should look benefits both the designers and your site visitors:
CSS simplifies design changes. For example, instead of formatting every head-
line in your site as 24-point Arial bold, you can create a style for the <hl> tag
that contains all the formatting information in one place and then apply that
Chapter 4: Understanding Web Design
style to the text in an XHTML file. CSS styles can be saved in the header sec-
tion at the very top of an XHTML page, or they can be saved in a separate file
that can be attached to multiple XHTML pages. One of the advantages of styles
is that if you can use the same style to format many headlines and then you
e later that you want all your headlines to use the Garamond font instead
al, all you need to do is change the style for the <hl> tag once, and it
automatically applies everywhere you've used the <hl> tag to format your
headlines.
J** Separating content from design enables you to create different style sheets
for different audiences and devices. In the future, separating content from
design is likely to become even more important as a growing number of people
view Web pages on everything from giant, flat-screen monitors to tiny, cell-
phone screens. One of the coolest features in Adobe Dreamweaver is Device
Central, where you can preview your page designs in a variety of handheld
devices and cellphones to see just how different they can look when displayed
on these small screens.
As you get more advanced with CSS, you can even create multiple style sheets
for the same Web page. For example, you can create one that's ideally suited
to a small screen like the one shown in Figure 4-6, another one that works best
when the page is printed, and yet another designed with a larger font size for
anyone who may have trouble reading the small print that is so common on
Web pages.
Using CSS makes your site comply with the current standards. Today, the
W3Q which sets standards for the Internet, recommends using CSS for nearly
every aspect of Web design because the best CSS designs are accessible, flex-
ible, and adaptable.
Axhb
; 1 1 ■■•.■■■=■: L.iiinul (M
Fl± &ft
Projtrt Deuce* UtMj Window Help
ii
FtasilLlEl.1 1B1TEKHB
Ftosfi Lit- 1.1 & 1 76*306
£
Flash Lb iD IB M0K32D
■ ■■ ■" "
it FLjsfc Lis 2,1 IE
5 rtHh Li,, - £ I H 2*»3I0
M
NllhLll ID IE240»3:D
NllhLll 1D32Z*M2D
i Fi*DjFEjHbP5
fat Cuo
■- ■ ..
ft Mrt*
ft P.™virj7
<fr OHUHE LlBW
it ru:hLP?
DmstlLbl.l IE
QrinhLllI 1 IE
L FinhLrfi 1 1 a
0 Ftei-Ti Lis. 1 1 3i
B Flash Lb 2.B 1B
0 Flash Lis £.0 16
E Flash Ht? 012
B Fl*5h Lft. 2.D 33
flrtEtlLfcll IE
QrtatlLbZ.1 IE
QruiLbzi IE
»| K**rr«Di If
e. p e
Discmp art I f
17EicaWpi
i » X 3£ p-:
4 TB x HH px
340 i 32] pi
126x3fipj(
MOkSMjk
13k3Ge«
MDjcJOQep:
12B ?. W D<
i 'I ' x M0 p :■
3hb> aa P >
rh.
~Ymj ntta earn J t to t-M it"
1 1
2 1 3 1
1 *
fill
h NLEIITD
» KFVP.C
» E-EHDEPHG
LFL
V EiKJ iiiiWfi FwiKifFj
£|J|X& : OTl lit- ifltLKl] JtHit Mil
S*Ti«n Fm[t>ii5
Ml xXOf*
n a E I I a £3 ^ ^ inrst
Figure 4-6: Designing Web pages with CSS can help you create designs
that display well on large or small screens.
£0 Part I: Laying the Groundwork
Drop Books
be ac(
Web sites designed in CSS are accessible to more visitors. Today, there's
a growing movement among some of the best designers in the world to get
everyone to follow the same standards, create Web sites with CSS, and make
sure they're accessible to everyone.
Web designers talk about accessibility, they mean creating a site that can
accessed by anyone who might ever visit your pages — and that includes
people with limited vision who use special browsers (often called screen read-
ers) that read Web pages aloud, as well as many others who use specialized
browsers for a variety of other reasons.
If you work for a university, a nonprofit, a government agency, or a similar
organization, you may be required to create accessible designs. In Chapter 6,
you find instructions for you alternative text with images and other features
that can improve Web site accessibility. Even if you're not required to design
for accessibility, it's still good practice because pages that meet accessibil-
ity standards also tend to score better in search engines because they're
designed in a way that makes it easy for search engines to access and interpret
their content.
Combining CSS and XHTML
Most professional Web designers today recommend creating Web page designs by
combining XHTML and CSS. How the two work together can get a bit complicated,
but you essentially:
1. Use XHTML to create the structure of a page with tags, such as division (div),
heading (hi , h2), and paragraph (p).
2. Create styles in CSS that specify the size of these elements, where they appear
on a page, and a variety of other formatting options.
Similarly, you use XHTML to insert images and create links, and then add styles
to change formatting options, such as removing the underline from your links or
changing the color that appears when someone rolls a cursor over a link.
Following standards
Following standards has become increas-
ingly important as Web design has become
more complex over the years.
Web technology has evolved to include new
features, such as CSS, that provide greater
design control than ever. Unfortunately,
Web browsers (such as Internet Explorer and
Firefox) don't always display the features of
Web sites in the same way. As a result, the
same Web page can look quite different from
one browser to another, especially in older
browsers. (Find more about browser differ-
ences and testing your designs in Chapter
10.) Enter standards, which help minimize
the browser differences and enable Web
pages to do their job of connecting people
across the Internet. Today, it's easy to agree
that if everyone who designed Web sites
and everyone who created the browsers that
displayed them followed the same rules, or
standards, we'd all have a much easier time
designing sites for the Internet.
Chapter 4: Understanding Web Design
All the templates featured in this book are written in XHTML and formatted with CSS
following modern Web standards. In Chapters 7- 9, you can find specific instructions
for using Adobe Dreamweaver to edit the templates and customize them. I did every-
thing j can to make these templates as versatile — and easy to use — as possible ,
Lore you understand about CSS and XHTML, the better you can customize
Fates without changing them in a way that violates current standards or
that will cause them to not display well in most Web browsers.
f rung i can
Creating page layouts With CSS and XHTML
The key to understanding how CSS works in page layout is to think in terms of
designing with a series of infinitely adjustable containers, or boxes. Indeed, this
approach to Web design is commonly referred to as the box model. Think of the
box model this way: First you use HTML tags, such as the <div> (division) tag or
<p> (paragraph) tag, to create a box around your content. Then you use CSS to
style each box, using attributes to control the position and alignment of each box,
and specify such settings as margins, padding, and borders.
Although you can use any XHTML tag as part of your page layout, the <div> tag is
used most often to create the boxes for main sections of a page, such as the banner
area, main content area, sidebars, and footer of a page. Think of <div> as a generic
container — designed to hold text, images, or other content — or to make a divi-
sion on the page, to separate one section of content from another. Unlike other
HTML tags, <div> has no inherent formatting features. Unless CSS is applied to
a <div> tag, it can seem invisible on a page, yet the tag has a powerful purpose
because any content surrounded by opening and closing <div> tags becomes an
object (or a box) that can be formatted with CSS.
I used the box model to create all the templates in this book. As a result, to change
the size or positioning of a section of a Web page in one of the templates featured in
Chapters 7-9, you need to edit the corresponding style. When you create or edit a
style that corresponds to a <div> tag ID, you can specify properties such as align-
ment, border, margin, height, and width to control how the <div> tag is displayed
on the page. In the template chapters, you find step-by-step instructions for adding
your own images and text to these templates, and for making minor changes to the
styles of the page. To edit the styles that control the positioning, width, and other
display options of the <div> tags that make up these pages layouts, read Chapter
6, where you find instructions for editing a CSS layout.
Each <div> in the page templates has an ID, which corresponds to a style in the
style sheet. The ID appears in the HTML within the <div> tag brackets so that the
browser knows which style to use to control the formatting of that <div> when
it displays the page. For example, all the templates have a <div> with the ID
container that controls the overall size of the design area. If you look at the
code, the <div> looks like this:
<div id= " container " ></div>
In the corresponding style sheet, which you can easily access through the CSS
Panel in Dreamweaver, you'll find a style called #container, which controls the
width and other settings for that <div>. If this all seems a bit confusing, don't
^ art '■ laying the Groundwork
worry too much at this stage. When you put all this theory into practice with the
templates in Chapters 7-9, it makes a lot more sense, and you find more detailed
instructions for editing CSS layouts in Chapter 6.
DropBoete
ore about CSS, you can find many more lessons on how to create, define,
'yles in my book Dreamweaver CS4 For Dummies (Wiley).
Understanding style selectors
One of the first things you need to understand when you create new styles is
which selector to use for which job. The selector determines the kind of style you
will create. Each selector option has different naming restrictions and purposes.
If you're completely new to working with styles, this may not make much sense
yet, but this is a fundamental part of work with styles, and I encourage you to read
through all these descriptions of selectors so that you can appreciate your options
before you move on.
Don't feel you have to memorize all this. Instead, consider folding down the corner
on this page so you can refer to this list of selectors when you create and edit styles
later.
Class selectors
The class selector is the most versatile selector option. Class styles can be used to
format any element (from text to images to multimedia), and they can be used as
many times as you like on any page in a Web site.
Class style names always begin with a period, and you can create class styles with
any name as long as you don't use spaces or special characters. Note: Hyphens
and dashes are okay. Thus, you could create a style called caption for the text that
appears before your pictures.
. caption
Dreamweaver helps you with the opening period (or a dot). If you choose class
as the selector type and forget to include a dot at the beginning of the name,
Dreamweaver adds one for you. Note: Don't include any space between the dot and
the style name, though.
One other thing that can make styles confusing is that when you apply a class style
to text or another element, the dot doesn't appear in the name when it's added to
your HTML code. Thus, if you applied the . caption style to a paragraph tag to
format the text under an image, it would look like this:
<p class= " caption" >This is a photo of an Egret in f light. </p>
Class styles must be applied to an element, such as the paragraph tag shown in this
example. Class tags can even be added to elements that are already defined by other
styles.
When you create a class style in Dreamweaver, the style is displayed in the CSS
Styles panel on the right side of the workspace (shown in Figure 4-7). You can apply
class styles by using the CSS drop-down list, also shown in Figure 4-7.
Chapter 4: Understanding Web Design
59
DropBook
New CSS Rule
Selector Type:
Choose a contextual selector type for your C55 rule.
ass (can apply to any HTML element)
ID (applies to only one HTML element)
Selector Tag (^defines an HTML element)
rhnncp r.K Compound (based on your selection)
Figure 4-7: Styles created with class selectors are available from the CSS drop-down list
and can be applied to any element and used as many times as you like on any page.
One more thing about styles for now: It's common to create styles to align images
and other elements to the right or left of a page, and styles with the names
. float-right and . float- left are included in all the templates included with
this book. These styles commonly include margin spacing to create a little white
space between an image and text when text is wrapped around the aligned image,
as shown in Figure 4-7.
For more details and step-by-step instructions for creating and applying styles with
class selectors, see Chapter 6.
10 selectors
Think of ID styles as the building blocks of most CSS layouts. What's special about
ID styles is that they should be used only once per page. This makes them ideally
suited to formatting <div> tags and other block-level elements that are used to
create distinct sections in a design and only appear once per page.
ID styles must begin with a pound (#) character. Similar to class styles,
Dreamweaver adds # to the beginning of the style name automatically if you forget
to include it. And, like with a class style, don't include a space between # and the
style name.
The ID selector option is a new addition to the CSS Rule dialog box in Dreamweaver
CS4. (In CS3, you had to choose the Advanced option to create an ID style.) Similar
to class styles, you can name ID styles anything you like as long as you don't use
spaces or special characters (again hyphens and underscores are okay). An ID style
used to identify the sidebar section of a page could look like this:
#sidebar
Similar to class styles, # isn't used in the HTML code when a style is applied to an
element, such as a <div> tag like this:
<div id=" sidebar ">Between these tags with the sidebar ID style,
you would include any headlines, text, or other
elements in your sidebar . </div>
In the predesigned CSS layouts included in Dreamweaver, all the designs are
created by combining a series of <div> tags with ID styles using names like
#container, #header, and # footer to identify the main sections of the design.
In Figure 4-8, you can see how a collection of ID and class styles are displayed in the
CSS Styles panel after they're created.
Part I: Laying the Groundwork
Styles panel
DropBo
i.*r, r.i ww.
Fib Edfl vW> hriiri ffo&tty k.imji Co/v*Yundi Bt» Wrtcto* htap
t ntta: <m 1 ^*Hr-m Aft, Sj-
- =!, ^
...Kill
|?
■
I
■A'lut students K.iiy
about Janine's videos
Hnnne Bmk'MTirp video* OrearMeaviar e^trPKirn Wen Fn?e Tutorial*
Learn Adobe Dreamweaver, Microsoft Express
<ittt$nfi2v a fomjj flow,
totnkousfaliwis roi5 odd.
ffi fir rfcu rK? ^ o tp- a i rfw ii
'i r cii Ria J* fl jfJ io sail,' ta
- Geoipna Canlreraa
Get a solid introduction to W<
advanced features, bdudlns
flJAJC in JhninciLi
for.
SPEClJLll LbxtiTtits
coupon be ki
Cmwoan " <$B !^ * E§ !
ED
I.
M*i r-i*i Aortal
\\\ □ Q hSp*h I Or** !
I atath sme She a. ..
tig
-.botf.lUe
-,™J
— .n*"l
— .iwdla
— .n* dl&luifl
— .rti£-rt>T
— .phrtXKralt
-ffortflr
— Jrfoslsrp
— .tl6*lkHC
— fptucoildn
(to hit
rurBn-bmwi flpft
inHftnmh-
fa *ll 'H|
-I
Class styles
Figure 4-8: Styles created with the ID selector should be used only once
per page and are ideal for creating a CSS layout.
Tag selectors
The tag selector is used to redefine existing XHTML tags. Select this option if you
want to change the appearance of an existing XHTML tag, such as the <hl> (head-
ing 1) tag or the <ul> (unordered list) tag.
In many cases, redefining existing XHTML tags with CSS has advantages over creat-
ing new styles. For example, content formatted with the heading 1 tag is well rec-
ognized on the Web as the most important text on a page. For that reason, many
search engines give priority to text formatted with the heading 1 tag. Similarly, the
hierarchical structure of the <hl>-<h6> tags helps ensure that, even if a visitor to
your site changes the text size in his Web browser, text formatted with the heading
1 tag is still larger relative to text formatted with an heading 2 tag, which is larger
than text formatted with the heading 3 tag, and so on.
The ability to change the appearance of headings and other tags with CSS makes it
possible to retain these advantages while still being able to use the font, size, color,
spacing, and other formatting options that you prefer in your Web design. When
you use the tag selector, the style definition is applied automatically to any text or
other element that's been formatted with the corresponding tag. Thus, if you've for-
matted a headline with an <hl> tag and then create a new <hl> style, the format-
ting you used to define the style will apply automatically to the headline as soon as
the style is created.
When you choose a tag selector type, all the XHTML tags become visible in a drop-
down list in the New CSS Rule dialog, making it easy to choose the tag style you
want to create, such as the HI tag shown in Figure 4-9.
Chapter 4: Understanding Web Design
6
DropBo
AP ELEMENTS
— ^container
— #header
— #banner
— #story
— #footer
— #video-box
— .clear
— body
— a: link
—/leftside a: link
— aivisited
— a: hover
— a:active
— #hflnnftr irmn
Properties for "ttsidebar 1"
background-color Q #E7EBE9
float left
font-size
line-height
padding-bottom
padding-left
padding-right
padding-top
width
90%
130%
15px
lOpx
5px
Opx
190px
<§& B J fiB
Property Inspector
Figure 4-9: You can redefine the appearance of any XHTML tag
by creating a style with a tag selector.
Creating compound styles
The compound selector can be used to combine two or more style rules to create
a style definition that displays only when one style is contained within another.
Compound styles are useful when you want to do something like use the heading
1 tag multiple times to format headlines in different ways on the same Web page.
For example, you could create one style for headlines that appear in the main story
area of a page and then create another style for headlines that appear in the side-
bar on the page and still use the heading 1 tag to format both.
Compound styles are created by combining ID, class, or tag styles and look like this:
#sidebarl hi
See Figure 4-10 for an example of how an <hl> style defined like this within a
# sidebar 1 ID style looks in the New CSS Rule dialog box. Note that you must
Part I: Laying the Groundwork
1-^ 1-^ witn an
DropBooRs
I New CSS Rule
include a space between each name or tag in a compound style and that you don't
include the brackets around tag in a style name. In this example, the style definition
will apply only to <hl> tags that appear within another element, such as a <div>
tag with an ID style #sidebarl.
Selector Type:
Choose a contextual selector type for your CSS rule,
Compound (based on your selection)
Selector Name:
Choose or enter a name for your selector.
#sidebarl hi
This selector name will apply your rule to
all <hl> elements
that are within any HTML elements with id "sidebar 1".
Less Specific
More Specific
Rule Definition:
Choose where your rule will be defined.
diyCommon.css
OK
Cancel
Help
Figure 4-1 0: Use the compound style selector to combine styles.
If a compound style combines more than one tag, it's written like this:
#sidebarl hi a: link
Again, you must include a
space between each name or tag. In this example, you
see a style that defines the appearance of the active link tag only when the link is
located inside an element formatted with the <hl> tag that's also inside an element
formatted with the #sidebarl ID. A compound style like this makes it possible to
create links that look different when they appear in a headline in the sidebar of a
page than when they appear in another part of the sidebar.
After you figure out the differences among these style selector options and when
they're best used, you're well on your way to mastering the art of creating Web
pages with CSS in Dreamweaver. (Find more information about compound styles
in Chapter 6.)
Understanding rule definition options
In CSS, you have the option of creating internal, external, or inline styles. You can
even use a combination of these options, or attach multiple external style sheets, to
the same Web page. Here's an explanation of these options:
Internal styles: If you create internal styles, the CSS code is stored in the <head>
area at the top of the HTML page you're working on, and the styles can be applied
only to the page in which they were created. If you're just creating a one-page Web
site or you're creating styles that will be used only on one page, an internal style
sheet is fine, but for most sites, external style sheets offer many advantages.
Chapter 4: Understanding Web Design 0^
External styles: If you save your styles in an external style sheet, they're
stored in a separate file with a . ess extension. External style sheets can be
attached to any or all the pages in a Web site in much the same way that you
can insert the same image into multiple pages. You can also attach multiple
'nal style sheets to the same page. For example, you can create one style
for styles that format text and another for layout styles. You can also
create external style sheets for different purposes, such as one for print and
one for screen display. One of the biggest advantages of external style sheets
is that they make it faster and easier to create new pages, and they make it
possible to update styles across many pages at once.
Inline styles: Inline styles are created within a document at the place that a style
is used and only apply to the element they're attached to in the document. These
are generally considered the least useful of the three style sheet options because
any changes to the defined style must be made to the code that contains the ele-
ment, which means you lose many of the benefits of styles, such as the ability to
make global updates and create very clean, fast-loading code. For example, creat-
ing one style for all your headlines and saving it in an external style sheet is more
efficient than applying the style formatting options to each headline separately.
At the bottom of the New CSS Rule dialog box, shown in Figure 4-11, you find a Rule
Definition drop-down list. Use this list to specify where and how you want to save
each new style that you define. The options are
This Document Only: Create an internal style that can only be used in the
open document.
New Style Sheet file: Create the new style in an external style sheet and create
a new external style sheet simultaneously.
An existing external style sheet: Choose any existing external style sheet
attached to the page by selecting the name of the style sheet from the Rule
Definition drop-down list. In Figure 4-11,1 am selecting an existing style sheet
with the name main .ess.
If you're creating a style that you'll likely want to use on more than one page in your
site, saving the style to a new or existing external style sheet is your best choice. If
you save a style in an internal style sheet and later decide you want to add it to an
external style sheet, you can move the style by clicking and dragging the style into
the external style sheet list in the CSS Styles panel.
Rule Definition:
Choose where your rule will be defined.
i
main. ess
(This document only)
- (Ne w Style Sheet File
Figure 4-1 1 : When defining a new CSS rule, save it in an internal or external style sheet.
Part I: Laying the Groundwork
Why so many fonts?
u can specify any font you
r ara*cw vexvbn your Web pages, you don't
have complete control over how that font
appears on your visitor's computer because
the font you apply is displayed properly
only if your visitors have the same font on
their hard drives. To help ensure that your
text appears as you intend, Dreamweaver
includes collections of the most common
fonts on Windows and Macintosh comput-
ers, grouped together in families, such as
Arial, Helvetica, sans serif, and Georgia,
Times New Roman, Times, and serif.
Here's how it works. When you apply a
collection of fonts like these, the browser
displays the formatted text in the first font
available in the list. For example, if you
choose the font collection that starts with
Georgia and your visitors have Georgia
on their hard drives, they'll see your text
in Georgia. If they don't have Georgia, the
text is displayed in the next font on the list
that your visitors do have — in this case,
Times New Roman. If they don't have that
font either, the text is displayed in Times;
and if they don't even have Times (which
would be very unusual), the browser looks
for any serif font. (In case you're not familiar
with font terms, serif describes fonts, such
as Times, that have those little curly things
on the edges of letters; sans ser/f means no
curly things, which is what you get with a
font like Arial.)
You can create your own font collections by
selecting the Edit Font List option from the
bottom of the Font-Family drop-down list in
the Property inspector or the Type category
of the CSS Rule definition dialog box. In the
Edit Font List dialog box, shown here, use
the plus and minus buttons at the top of the
Edit Font List dialog box to add or remove
a font collection. To add individual fonts to
a collection, select the font name from the
bottom right of the dialog box and use the
double-left arrows to add it to a font list.
(Use the double-right arrows to remove a
font from a collection.)
The only way to ensure that text appears in
the font you want is to create the text in a
graphic in a program, such as Photoshop or
Fireworks, and then insert the graphic with
the text into your page. That's not a bad
option for special text, such as banners or
logos; but it's usually not a good option for
all your text because graphics take longer
to download than text and are harder to
update later.
Edit Font List
00
Font list:
BE
Lucida Sans Unicode, Lucida Grande, sans-serif
M5 Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive
Garamond, Times New Roman, sans-serif
□
Chosen fonts:
Available fonts:
OCR-A II
Old English Text MT
OldgateLaneOutline
Orator Std
Onyx
OK
Cancel
Help
Chapter 4: Understanding Web Design 65
Looking at the code behind the scenes
Even if you
DropBoGte
show what
Even if you prefer not to look at the code behind your Web pages, it's helpful to at
some familiarity with different kinds of tags, CSS, and other code that
ver creates for you when you design Web pages. The following examples
the CSS code in an internal or external style sheet would look like in
Dreamweaver for the following styles:
An ID style created with the ID selector, that is named #container, and is
defined as 780 pixels wide with the left and right margins set to auto (a cool
trick for centering a CSS design, covered in Chapter 6).
A style created with a class selector, that is named . caption, and is defined
as Verdana, Arial, Helvetica, sans serif, small, italic, and bold.
A style created with a tag selector to redefine the HTML tag <hl> — as Arial,
Helvetica, sans serif, large, and bold. (Note: Because the heading tags already
include bold formatting, it's not necessary to include bold in the style definition.)
#container {
width: 7 80px;
margin-right: auto;
margin-left: auto;
}
.caption {
}
HI {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: italic;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
Part I: Laying the Groundwork
DropBooks
Part II
DropBookf utting the Pages
Together
The 5 th Wave By Rich Tennant
a mite too £ast, but dang t£ I can £md a
*mo$exz function m the toolbox/*
DropBooks
Chapter 5
DropBooks Editing and Creating
Web Graphics
Tasks Performed
in This Chapter
Getting to know
Photoshop Elements
Cropping images
Resizing images
Optimizing photos as
JPEGs
Optimizing graphics in
GIF format
Combining photos and
text in a new image
Editing images with
multiple layers
In this chapter, you discover some of the extraordinary things
you can do with a program like Photoshop Elements. You find
out how to create images (like banners and buttons) for Web
pages and then resize, crop, and edit those images.
Perhaps most important in this book about creating Web sites,
you find step-by-step instructions for creating and optimizing
graphics that download quickly over the Web.
You can use a number of competing image-editing programs to
complete the tasks in this book. I recommend Adobe Photoshop
Elements because it's based on the industry standard in image
editing, Adobe Photoshop, but is a lot easier to use and a lot less
expensive. In this book, I use Elements 8, but if you use any of
the last few versions of Photoshop or Photoshop Elements, you
should have no trouble following along with the features covered
in the step-by-step tasks.
Introducing Photoshop Elements
Although Photoshop Elements is a stripped-down version of its big-sister program,
Adobe Photoshop, it's still a powerful tool. The workspace, shown in Figure 5-1, is
clean and simple yet features many tools and panels — and it has loads of options
for editing images and saving them for the Web. Adobe designed the interface of
this program to keep the tools around the edge of the screen and to give you the
largest possible workspace in the middle, although you can open and close panels
and move them around the screen to suit your preferences.
When you first launch Photoshop Elements, you're greeted by a Welcome screen
featuring six choices. To access the program's main editing features, which are
covered in the following sections, choose Edit and Enhance Photos.
Part II: Putting the Pages Together
Figure 5-1 : Photoshop Elements displays a wide range of tools and panels around the
perimeter of the main workspace, where you can create and edit images.
To help you become familiar with the program before you start on the tasks, the
following sections introduce you to the way the workspace in Elements is organized
and its main features: the Toolbox, Options bar, menu, and panels.
The Toolbox
One of the first things you have to get used to when you use graphics programs
like Photoshop Elements is that before you can do anything, like crop an image,
you have to select the correct tool from the Toolbox. This feature works much like
the toolbox you may have in your garage: You choose a hammer when you want to
pound a nail, or a screwdriver when you want to turn a screw.
Selecting a tool from the Toolbox is easy: Just click the icon that represents the
tool you want, such as the T icon (for adding text to an image). The tricky part is
knowing which tool to use for the job (which is similar to understanding the dif-
ference between flat-head and Phillips-head screwdrivers). Some tools are easy to
identify: The Brush tool is for painting, for example. Other tools, such as the Clone
Stamp tool, may seem confusing at first.
The list of tools shown in Figure 5-2 is designed to help you appreciate all your
options in the Toolbox.
The Toolbox can appear in one long list down the side of the Workspace (refer to
Figure 5-1), or you can drag it anywhere on the screen and adjust it to appear in two
columns (see Figure 5-2).
Chapter 5: Editing and Creating Web Graphics *J J
DropBooks
Move
Hand
Rectangular Marquee
Magic Wand
Horizontal Type Tool
Cookie Cutter
Red Eye Removal
Clone Stamp
Brush Tool
Paint Bucket
Rectangle
Sponge
Zoom
Eyedropper
Lasso
Quick Selection
Crop
Straighten
Spot Healing Brush
Eraser
i Smart Brush Tool
Gradient
Set Foreground Color
Blur
Set Background Color
Figure 5-2: The Toolbox gives you a wide range of options for your image editing arsenal.
Part II: Putting the Pages Together
Here's a hint: Some tools are hidden underneath other tools. If a Toolbox button
has a small triangle in its lower-right corner, it means that multiple tools are acces-
sible from the same button. To view these alternative tools, simply click and hold
Figure 5-3: The fly-out menus reveal more options under some of the Toolbox items.
Although you use many of these tools in the step-by-step tasks in this book to create
and edit images for the Web, I can't possibly cover all the ways you can use these
great features in this introduction to Web graphics. In this book, I focus on the tools
and features that are most important in Web design. If you want to find out more
about creating and editing images, check out Photoshop Elements 8 For Dummies, by
Barbara Obermeier and Ted Padova, or (for more advanced techniques) Photoshop
Bible, by Laurie Ulrich Fuller and Robert C. Fuller (both from Wiley Publishing).
The Options bar
Running across the top of the Elements workspace is the Options bar, shown in
Figure 5-4. The Options bar includes drop-down lists, check boxes, and radio buttons
that you can use to adjust the settings for any selected tool. For example, when you
select the Brush tool, options are available for changing the size and shape of the
stroke that you make when you click and drag the Brush tool over an image. If you
switch to the Text tool, the Options bar changes to feature font and size options.
The art of Undo and Redo
With all the features, filters, and editing
options in Photoshop Elements, trial and
error is often your best strategy — and it's
easy when you can use Undo, Redo, and
even Revert to restore any image to its last-
saved version.
If you make a change to an image and then
change your mind, just choose EditOUndo
to undo it. If you aren't quite sure whether
you made an improvement, try Undo and
then Redo (EditORedo) so that you can
compare the image before and after the
effect. Photoshop Elements includes many
levels of Undo, so you can go back many
steps and experiment until an image is just
the way you want it.
If you're a keyboard shortcut fan, press
Ctrl+Z to use Undo in Windows (or §§+Z on
the Mac); for Redo, press Ctrl+Y (or 88+Y).
Chapter 5: Editing and Creating Web Graphics 7^
DropBo
Figure 5-4: The Options bar provides easy access to settings for each tool,
such as the font and size options that correspond to the Text tool.
The menu bar
No program is complete without a menu bar at the top of the workspace (shown
in Figure 5-5). When you click the menu names, you can choose from a list of com-
mands and editing options. If an ellipsis (. . .) follows the command name, the
option launches a dialog box where you can apply a variety of features. Otherwise,
the command kicks in automatically as soon as it's selected.
Figure 5-5: The menu bar provides access to most of the features in Photoshop Elements, including
my personal favorite, the Undo option, which can get you out of all kinds of problems.
The panels
As in every Adobe application, the Elements workspace is filled with panels, which
are small windows that hold formatting options and other settings. The various
Part II: Putting the Pages Together
panels provide tools to help you edit and examine images. To open a panel, choose
it from the Window menu. For example, choosing WindowOColor Swatches opens
a panel with color options. Note that each panel has a More button; clicking More
displays a list of additional commands.
Jn\^8«i remain in its column on the right side of the workspace, or you can
drag panels anywhere on the screen, which is a handy way to get them closer to
where you're working. To move a panel, click it and then drag it by its tab, and
then release it where you like. After you detach a panel from the main application
window, it gains its own title bar, which allows for easier moving and identification.
In Figure 5-6, I'm using the Layer Styles in the Special Effects panel to add a drop shadow
to my text, a common way to add depth and make text appear to float on a page.
Figure 5-6: You can move a panel so that it's closer to whatever you're working on.
If you ever want to get back to the original workspace layout in Photoshop Elements,
just choose WindowOReset Panels, and all the panels and bins magically rearrange
themselves to their original positions.
Creating and opening images in Elements
You can open existing images in Photoshop
Elements or create completely new images,
and you can have multiple images open at
a time, which makes it easier to combine
images and create complex designs. When
you create a new image, you can specify
many settings, including size, resolution,
and color.
To create a new document, choose FileONew,
and in the New File dialog box that appears,
specify the height, width, resolution, color
mode, and background color. You can alter
any of the settings after you create an image.
To open an existing image, choose FileO
Open, find the image you want on your
hard drive, click to select it, and then click
Open. The image appears in a new window,
ready for you to edit.
If you try to open an image and don't see
it in a folder on your hard drive when you
know that it should be there, change the
Files of Type field (at the bottom of the Open
dialog box) to All Formats. Every image in
the folder should now appear in the file list.
Chapter 5: Editing and Creating Web Graphics *J $
Cropping an
\J — Smf{ j/ou
Need to Know
Toolbox:
w Adobe Photoshop
Elements (or a similar
program)
A digital image
Time needed:
Less than half
an hour
Image
Because photos on the Web are generally small, one way to ensure that
important features are visible is to crop out any material that's not
essential. The best strategy when cropping an image for the Web is to
focus on the key elements in the image. You can cut off the top, bottom,
or sides, as much or as little as you like, with the adjustable edges of
the Crop tool.
In this step-by-step task, you see how using the Crop tool to remove the
background helps focus attention on the subject.
Whenever you crop, edit, or resize an image, it's good practice to first
save a copy of the image to edit. That way you can always go back to
the original image if you're not happy with the results of your edits.
7. With an image open in Elements, select the Crop tool
from the Tools panel. Because you can't retrieve cropped
parts of an image after you save and close the image file,
you likely want to work with a copy of your original
image.
Aspect Ratio: No Restriction
Kremlin- Russia jpg £ 100% |RCB/q * X
Resolution:
pixels/inch
-□
/ 100%
9.25 inches x6.167 inches (72 ppi)
2. Click and drag within the image to
define the area you want to crop.
As you drag, a crop box appears.
Everything outside the crop box is
removed when you complete the
crop. To increase or decrease the size
of the crop box, drag the handles at
the corners or edges of the box.
Part II: Putting the Pages Together
3- To complete the crop, double-click in the middle of the
selected area or click the Commit icon (the green check
mark) in the lower-right corner of the crop box. To cancel
the Crop tool without cropping the image, click the
Cancel button (the red circle with a line through it).
,/ Auto Select Layer y Show Bounding Box y Show Highlight on Rollover Ej] Arrange
I
Kemfin-RussBjpg £ 100% [R.GB/8] * x
4- When you complete the crop, the
areas of the image outside the crop
box are removed, and the overall
size of the image is reduced propor-
tionately. The Crop tool remains
active until you select a different
tool from the Toolbox.
J 100% 3.764 i
64 inches (72 ppi)
Repeat Steps 2 through 4 to make an additional crop. Choose EditOUndo Crop to restore the image if you're
unhappy with the crop. When you save the image, your changes become permanent.
Chapter 5: Editing and Creating Web Graphics
Resizing an
\J — Siitfi j/ou
Need to Know
Toolbox:
w Adobe Photoshop
Elements (or a similar
program)
A digital image
Time needed:
Less than half
an hour
Image
Resizing is important for two reasons: The images must be small
enough to display well on a computer monitor, and you want them to
download quickly to a user's computer. The smaller the image is, the
faster it will download. There are two steps to reducing the size of an
image you want to use on the Web.
The first step is to reduce the physical size of an image by reducing its
dimensions. You want to size your images to fit well in a browser window
and to work within the design of your site. And remember, the smaller
you make the image, the faster it downloads to a user's computer.
The second step is a bit more complex to understand at first. It has to do
with reducing the resolution of an image, which changes the number of
pixels in the image, but won't alter the size the image appears on a com-
puter screen. When you're working with images for the Web, you want to
reduce the resolution to 72 pixels per inch (or ppi). (If you're wondering
why 72, see the sidebar that's appropriately named "Why only 72 ppi?")
Follow these steps to reduce the size of an image and lower the resolution:
7. With an image open in Elements, choose
ImageOResize. If you don't want your
original image to lose quality, make a
copy of it by choosing FileOSave As and
giving the copy a new name. Then resize
the copy for your Web site.
File Edit Image Enhance Layer Select Filter View
2. Before you change the resolution of an image, make
sure to deselect the Resample Image check box at the
bottom of the Image Size dialog box (you should always
make sure the resample check box is deselected when
you change resolution). Then highlight the number in
the Resolution field and replace it by typing in the
number 72. (Note that with the Resample Image check
box deselected, you can't change the Pixel dimensions.)
3- Before you change the dimensions of an image,
make sure to select the Resample Image check
box (you always want the Resample box selected
when you resize), and also select the Scale Styles
and Constrain Proportions check boxes to main-
tain the height and width ratio in the image. In
this example, I am changing the width of this
image to 500 pixels, and the height automatically
adjusts to 269 pixels to maintain the proportions.
When you're resizing an image for the Web, it's
best to use the fields in the Pixel Dimensions
area, at the top of the dialog box. Using these
options, you can alter the height and width of an
image to a specified size in pixels or enlarge or
reduce the image by any percentage.
Edit Inage Enhance Lautr Select Filter Vltvu Window Help
V Undo Image Size
4- Click OK to resize the image. If you
want to return the image to its
previous size, choose EditOUndo.
When you save the image, the
changes become permanent. Notice
that the file size is reduced from
1.33MB to 393.8K.
jr M«rq«d
FIN Lay tr...
StrafceC Outline s^lecucnv
□erine Brush...
Define Patwrn...
Add Blank Pacji An+£rj^
Add Page Using Current Layout AlW-EhirtKbrFK]
Delete Current Parje
Color Sattng&u
pmhbc Manager...
Preferences
.-MtmchH x i 7dtrr:h« |72 ppi
Why only 72 ppi?
When you save images for the Web, you
should save them at a resolution of 72
pixels per inch (better known as ppi). Most
computer monitors display no more than
72 ppi, so any number higher than that is
wasted on the Web because you're making
your visitors download more pixels than
they can see. However, if you want to print
an image, you want all the pixels you can
get, usually at least 200 ppi or higher, which
is why most images you see on the Web
look terrible if you try to print them in a
large size.
Chapter 5: Editing and Creating Web Graphics *J
Optimizing Photos as JPEGs
\J — Siitfi j/ou
Need to Know
Toolbox:
w Adobe Photoshop
Elements (or a similar
program)
A digital image with
millions of colors
Time needed:
Less than half
an hour
The JPEG format is the best choice for images with many colors, such
as photographs or images that include shading or gradients. You can
save any image in GIF, PNG, or JPEG format by using the Save for Web
dialog box, but you produce the best results if you choose the best
format for each image. That's because the best way to optimize images
(make them download faster over the Web) depends on how many
colors appear in the image.
It's always best to edit an image in the highest resolution possible and
then resize the image and reduce the resolution (as you do in the previ-
ous task) just before optimizing it for the Web.
Also note that even if a photograph is already in the JPEG format, you
can almost always reduce its file size (and increase its download speed)
by using the Save for Web dialog box to optimize the image, as you see
in the following steps:
f* • JlgMn 0»*»r«r*<.dct*lt>
File Edr Ytvy Ennsna layer sue* Mttf V«w Wmiw H»»>
k vuw Mtal hutm lui»t«*q x
- 9
/« Create a new image or open an
existing image in any format in
Photoshop Elements. Because you
create a copy of the image when
you use the Save for Web dialog
box, you don't need to worry about
altering your original image.
1 mm 1 UN
When you're optimizing an image for the Web, it always comes down to balancing quality with file size. You
want your images to download fast, but not if that means they don't look good when they arrive.
Part II: Putting the Pages Together
SmmiFoi W.I.
V
✓
r<t«if rv'Mi iMpuv
rj.»>.4,^4Vt m TCI trikv«#M«i
I
Cral
• ■ ■ ■ -
'"**» 111
I.
I"»k
NH
| <W| <I| l>) »
i.. g
3- If the image, like the one shown in this example, is larger
than the preview area in the Save for Web dialog box,
choose the Hand tool from the upper-left corner of the
dialog box. Then click the image and drag to position the
most important elements in the image where you can
see a better preview. You can also change the image's
display by right-clicking directly over the preview image
and choosing Fit on Screen or any of the magnification
settings.
Preset: - Custom
i
JPEG
Very High
Quality:
30
t
progressive
[TjlCC Profile
Mette:
Choose FileOSave for Web, and in
the Save for Web dialog box, select
JPEG from the Optimized File
Format drop-down list. Note: The
original version of the image
appears on the left side of the
dialog box, and the version on the
right is a preview of how the image
will look with the specified settings.
9
Save an image to include in a Web page.
Save photographs as JPEG and images with limited colors as GIF.
The Image preview shows how image will look using the current settings
Jasper Johai ©2009
4- To reduce the size of a JPEG image, use the slider to
alter the Quality setting or enter a number, up to 100.
Compression is measured as a percentage: The lower
the number, the higher the compression and the
smaller the file size.
Original: "930x500_Fashion_B.jpg"
JPEG
80 quality
612K
34.74K
13 sec @ 28.8 Kbps
5. Notice in the bottom of the Save for Web dialog box that the original file size appears
under the preview of the image on the left, and the optimized file size appears under
the preview on the right. In this example, you can see that when the Quality field is
set to 80, the image is reduced from 612K to 34.74K.
Chapter 5: Editing and Creating Web Graphics $
JPEG
28.28K
11 sec <?> 28.8 Kbps
Jasper Johal ©
80 quality
Preset: JPEG High
0
JPEG ▼
High w
Quality:
Progressive
□ ICC Profile
Matte
I — Image Si2e
Original Size
Width: 418 pixels
Height: 500 pixels
New Size
Width: 418
pixels
Height: 500 pixels
]'
Percent: 100
J Constrain Proportions
Apply
Animation
[7] Loop
Frame Delay:
iof 1 ] | <<1| <i f\> \\ » |
6. Alter the Quality setting until the image uses the
greatest amount of compression (the greater the
compression, the lower the number in the Quality
field), without degrading the appearance of the
image too much. In this example, I reduced the
Quality setting to 60, creating a file size of 28.28K.
7. Keep a close eye on the preview
screen as you adjust the Quality
option. If you reduce the quality too
far, you degrade the image's appear-
ance noticeably.
8. In this example, I decided I wanted to preserve as much quality as possible (reducing it to 60 made it
look a little pixilated), so I've changed it to 80. After all the image settings are the way you want
them, click OK, and in the Save dialog box, give the image a new name and specify where you want to
save it on your hard drive. Then click Save to save a new version of the JPEG with the specified set-
tings and preserve the original unchanged.
Part II: Putting the Pages Together
Optimizing Graphics in GIF or PNG Format
stuff you
Need to Knou)
Toolbox:
\* Adobe Photoshop
Elements (or a similar
program)
A digital image with
limited colors
Time needed:
Less than half
an hour
The GIF format has long been considered best for drawings, cartoons, and
other images that have only a few bands of solid color, although many Web
designers now prefer the PNG format. (As described in the previous sec-
tion, the JPEG format is ideal for photographs and other images with mil-
lions of colors.) GIFs and PNGs are also the best format to use when you
want to create images that use a transparent background, a trick that
makes images appear to float on a Web page. As the Web has matured, the
PNG format has gained popularity. PNGs are superior to GIFs in all ways
except one: GIFs are better supported by Web browsers older than Internet
Explorer 6.0, especially in the area of transparency.
If your goal is to ensure that your pages display well to anyone who may ever
visit your site, GIF is the safer option. If you want your images to look their
best with the smallest file sizes, you produce better results with the PNG
format. Also, you can rest assured that very few people are still using brows-
ers so old that they don't support PNG. In the step-by-step exercise that fol-
lows, I chose the PNG format, but the process is the same for both options.
This task shows you the best way to reduce the number of colors in any
image when you save it in either the PNG or GIF format using Photoshop
Elements.
fffl ■: -
Cn4ta NiwAdDte IP
Fife Edit Jiaat Enhiyin Lw Sifert Filter View t
XlrKknu hfeb
fata ftba ■ ■
* .gmr-KT-ii+j * hi* |Ssc«ffo»>j. KEfl ■ >:
/« Create a new image or open an
existing image in any format in
Photoshop Elements. Because you
save a copy of an image when you
use the Save for Web option, you
don't have to worry about altering
your original image (just don't save
over the original).
JASPER JOHAL
PHOTO
R A P H Y
When you use the PNG or GIF formats, you can reduce download time by decreasing the total number of colors
used in the image, which makes it ideal for graphics that need only a few colors in order to display well, such as
cartoons or simple logo designs. When you reduce the number of colors in a PNG or GIF image, you're essen-
tially removing colors you don't need. If you take away too many colors, however, the change can be drastic
(and look terrible); but if you limit the image to only the number of colors that are necessary, you might not
even notice the difference, and the image will download much faster.
Chapter 5: Editing and Creating Web Graphics
for Web. In the
Save for Web dialog box, choose
PNG-8 from the Optimized File
Format drop-down list. (PNG-24
supports color and alpha transpar-
ency better, but with a much higher
file size, so you're almost always
better off with PNG-8.)
Zw. Fir Vfi\:
ED
JASPER JOHAIL
4.IWK
2nn
'I
HE -rc-k-rc
0
on
f
1
Hat
J
-T
r--,
J"
■■•I.. "■ T
■
pixb
]■
,' 'Zrrarin Pp^-vta-rc
Preset: Custom
|PNG-8 £
]lnterlaced
Perceptual t
Colors:
Dither:
100%
J Transparency
Matte:
Im
a
r
None
Eyedropper Color
White
Black
Other...
3- If you're creating an image with a transparent back-
ground, select the Transparency check box and then
specify a matte color. The matte color should match the
background color of the Web page where the image will
be displayed. Using a matching matte color helps prevent
"j aggies" from appearing around the edges of the image.
To change this color, first select the eyedropper from the
upper-left corner of the dialog box. Then click in the
Matte field to open the color panel where you can select
the Eyedropper Color option to apply the color you just
sampled with the Eyedropper tool. You can also select
any of the other color options in the drop-down list.
Preset: - Custom
4- To reduce the size of the image, lower the number of
colors by entering a number less than 256 in the Colors
field or by selecting a preset number from the Colors
drop-down list. In this example, the image is reduced
from 256 (the maximum number of colors a GIF can
have) to 32. You can change the numbers to see the
results in the preview and then change them again
if you're not happy with the results, as I do in the
next step).
®
PNG-S
Perceptual
Colors:
] Interlaced
1MB
pj| Transparency
Dither: 10 2
4
Matte:
S
16
Image Size
Original Size
Width: 960 pixels
Height: 65 pixels
64
126
256
Part II: Putting the Pages Together
5.
Notice at the bottom of the Save for Web dialog box that
the original file size appears under the preview of the
image on the top and the optimized file size appears
er^thejDrflview on the bottom. Compare these num-
mich smaller the image is with the
oTcolofs^reduced from 256 to 64. In this example,
you can see that by reducing the number of colors, the
image has been reduced from 183K to 4.452K.
fill JASPER
J O H A L
PHOT
PNG-8
1.348K
1 sec @ 28.8 Kbps
100% dither
Perceptual palette
2 colors
6* Reduce the number of colors further to make the file size
even smaller — but don't go too far. In this example, you
can see that when the image is reduced to only two
colors, the text gets jagged and the detail is lost in the
image of the eye. That's because even though the image
appears to use only a few colors, along the edge of the
letters, many variations of the main colors are used to
create a clean line between the text and the background.
With only two colors in the image, those color variations
are lost and the smooth edge becomes jagged.
S 4 vi: Fir Wat:
D
y
, i Sim (ttntft^r. r. K*t*<S r>iyi. *«t « <■»:»•.<! 60S
C*
JJmi
Lr
•
Ft»!t
JASPER JOHAL
IOt
JASPER JOHAL
PHOT
yt<m>t Sbt
•>tr ■* Kit.
New to
. .Mil.'
(Mi
Tift
| <il | t> i>fr
1 PNG-S
' 4.452K
2 sec @ 28.8 Kbps
ftr-
8.
Adjust the number of colors and
other settings until the image uses
the smallest number of colors (and
therefore has the smallest file size)
without degrading the appearance of
the image. In this example, I was able
to reduce the image to 64 colors
without a noticeable loss of quality.
After all the image settings are the
way you want them, click OK. In the
Save dialog box, name the image,
and specify where you want to save
it on your hard drive. Then click
Save.
When you use the Save for Web dialog box, Elements automatically saves a copy of the image in the new
format and leaves the original image unchanged.
Chapter 5: Editing and Creating Web Graphics S5
Dro
Combining Photos and Text in a New Image
\J — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Photoshop
Elements (or a similar
program that supports
layers)
Digital images
Time needed:
About half an
hour (unless you
get carried away)
Creating a new image with photos and text is almost as easy as editing
an existing image, such as the banners and buttons included in the tem-
plates in this book.
In general, I find that the best method is to create a new image in
Photoshop Elements and then copy any photos or other graphics into
the new image file. After the images are in place, you can easily add text
to pull it all together. Just follow these steps to create your own ban-
ners and buttons:
7. In Photoshop Elements, choose FileONewO
Blank File to create a new image. In the New
dialog box, specify the size, resolution, and
background color. In this task, I'm creating an
image that's 760 pixels wide by 410 pixels high
with a resolution of 72 ppi, in RGB color with a
white background. (For the Web, the color
mode is always RGB for JPEG images.)
B*»t P|nil&
PrajtcCBin
1 9*USttO_r&shlon_B pg
3Vogi
2. If the Layers panel isn't already open on the side
of the workspace, choose WindowOLayers to
open the Layers panel. (It must be open if you
want to keep track of the layers as they're auto-
matically created when you copy in images or
add text to the image.)
Part II: Putting the Pages Together
rob
j ®- Sign In C"3te N*WfldDt* ID
Fife Edit y*v>t En h win Lw deleft Filter Mew Window Htb
' IDJlfFui *^ ni'. i *H*«f
3. Open any image or images that you
want to add to the new file by
choosing FileOOpen and selecting
the image from your hard drive.
You can open as many images as
you want at once in Photoshop or
Photoshop Elements (or as many as
your computer's memory can sup-
port) in any of the many supported
formats, including JPEG, GIF, TIF,
and PSD.
4- When you're working with multiple
images in Photoshop Elements, you
may want to open the Project Bin,
at the bottom of the workspace: If it
isn't already open, choose WindowO
Open the Project Bin. You can select
any open image by double-clicking its
thumbnail image in the Project Bin.
Yoga p 100% [RGFVSQ X
©yoga ljpg £ 100% (RGEVB)
1 00% © 5*58 inches x 5.68 1 inches (72 ppi)
J
Hi)* Slpnln mate Niwfidct* ID
Flit Edit H»t Enhwn Lw Sifcrt Filter Hew Wnclm Htfc
v " X »mj»-I K4 » MX* PtttA
C P«*t Panels If undo ~* Rub ffl Oienzti A
5- To copy an open image into the new file, first click to
select the Move tool from the upper-left corner of the
Toolbox. Then click anywhere on an open image to
make it active and choose SelectOAll.
Chapter 5: Editing and Creating Web Graphics
Create New Adobe ID
1
ance Layer Select Filter View W
Ctrl+Z
ooks
Ctrl+Y
ll Copy
6. With the image selected, choose FileOCopy or press
the key combination Ctrl+C (on Windows) or §§+C
(on the Mac).
Ctrl+C
lit Edit lm»B* Enhance laytr Selstf Filter Wmtw»v Hup
7. Here's the tricky part: You need to select the
file where you want to add the image before
you paste it. If the Project Bin is open at the
bottom of the workspace, you can select the
destination image there. You can also select
any image that's visible in the workspace by
clicking it. In both Photoshop and Photoshop
Elements, you can also select any open image
by choosing the name of the file from the
bottom of the Window menu.
9.
n x
1
■Muanntnts
Color ?«viu-h«
Content
Effects
Fgvontis
Hlnoqrtm
Info
Nar taster
Urdo Hilton;
Pantl Bin
tomt Panes
8. If any of the open images are in your way,
you can minimize them, keeping them open
and available in the Project Bin, but out of
the workspace.
With your new, blank image active in the workspace,
choose FileOPaste, or use the key combinations Ctrl+V
(on Windows) or §§+V (on the Mac), to paste the copied
image into the new image.
Ctrl+Z
Ctrl+Y
Ctrl+C
hift+Ctrl+C
Ctrl+V
S8 ^ art "■ P utt ' n 9 Pages Together
Yoga 0 100% [Layer 1, RGB/B] " X
DropBooks
7 0. To position the pasted image, click
to select it and then drag it to the
place where you want it to appear
in the new image. For more precise
images, use the arrow keys — you
can adjust a selected layer pixel-by-
pixel in any direction. You can
resize an image with the Move tool
by clicking and dragging any corner
to adjust the height and width.
A 100%
7 7. To add and position additional
images, repeat Steps 6 through 10.
Notice in this example that the Layers
palette displays three layers — the
white background layer and a sepa-
rate layer for each photo pasted into
the image. As I added those images,
Photoshop Elements added the layers
automatically.
/ 2. To add text to an image (whether or not it
already has multiple layers, like this one
does), you must first select the Text tool
from the Toolbox.
Chapter 5: Editing and Creating Web Graphics
73- When you select the Text tool, a new collection of
options appears at the top of the workspace. On the
Options bar, you can change such text options as the
color (shown in this figure), by clicking the color well
to open the color selection palette and then clicking
any color in the palette. Use the scroll bar, to the right
of the palette window, to display more colors.
Image Enhance
Window
/4- With the Text tool selected, you can also use
the Text tool options at the top of the work-
space to change the font size, face, and
alignment.
15* To add text to the image, click to place your cursor
where you want it and then type. You can add as much
text as you want to an image and press the Enter (or
Return) key to add line breaks.
16. You can also use the text options at the top
of the workspace to edit the text after you
type it. To do so, simply select the text you
want to change, and then choose any of the
formatting options to alter the color, font,
size, or other settings. To edit the words,
click to select the text and then delete or
type to replace it.
Part II: Putting the Pages Together
77. When you add text, Photoshop automatically places it
on a new layer, which appears in the Layers palette. To
move or edit a layer, you must first select the Move
ol from tile Toolbox. Photoshop Elements automati-
Ml^ll^r when you click it, and then you can
na^ftn^osition it on the page. To move a
layer so that it appears in front of another layer, click
and drag it above the other layer in the Layers palette.
Hu Wit ll'. I). ttlhaufc it, il fcrlta fl
1
rwaitci an
S3 !$ SIfi
3
4 *
H Jasper Johal s 2009
' ^
o
jA Layer 2
GO Layer 1
1
Background A
/ 5. You can continue to add text layers
and images, and edit and adjust
them, forever by repeating this set
of steps. One of the best ways to
become comfortable with using
Photoshop Elements is to take time
to experiment with combining and
rearranging text and images in mul-
tiple layers.
As you create more and more layers in an image, it's good practice to give your layers names as you create them
so that you can better identify a layer when you want to edit it later.
Turning layers on and off or rearranging them
Sometimes when you're working on an
image with many layers, it's handy to turn
them on and off so that you can experi-
ment with different combinations or clear
the workspace while you work on a detail.
By clicking the small eye icon to the left of
any layer, you can make the layer invisible
in the workspace. Don't worry — you can
turn the layer back on by simply clicking in
the same field again to make the eye icon
reappear. That's the beauty of this feature:
Now you see it, now you don't.
You can also rearrange the order of layers in
the Layers panel, which is how you can con-
trol which layer is on top in the image. To
change the stacking order, click to drag the
layer up or down in the Layers panel. The
higher the layer is in the panel, the higher
its position is in the stacking order in the file.
Chapter 5: Editing and Creating Web Graphics
Editing Images With Multiple Layers
\J — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Photoshop
Elements (or a similar
program that supports
layers)
A digital image with
multiple layers
Time needed:
Less than half
an hour
One of the most confusing features in a program like Photoshop
Elements is the way it divides different parts of an image into layers. In
the previous task, Photoshop automatically created a new layer each
time you added a new image or text to the file. Keeping each element of
an image on a separate layer is a bit like keeping a bunch of sticky notes
on your desk. If each photo or piece of text is on a separate layer, you
can move them around independently, much like you might rearrange
your priorities by changing the order of the sticky notes.
Using Layers to separate one image into multiple sections makes it pos-
sible for you to do things like edit text without changing the photo
underneath it or move separate images around a photo montage until
you get them just the way you want them.
Without layers, text would become stuck on a photo in a banner, like
the one shown in this task, and you couldn't edit the text again after
you added it to the image. The layers feature is especially useful for
customizing the banners and other graphic elements included in the
templates used in this book.
When you open an image that has many layers, such as the image tem-
plates included with this book, it's a good idea to open up the Layers
panel by choosing WindowOLayers (if it's not open already).
Before you can edit any text or image contained in a layer, you have to
first select the appropriate tool from the Toolbox and then select the
corresponding layer. That's where the Layers panel comes in, as you
see in this task.
Slpnln Crista Niwedtf* ID
Flit Edit Hagt Enhsin Lw SrKrt Filter Wiw Wl
fi,i*i, , AJ-i,iTL,Pl jHitM'Hiib.: 1:1
„ , i , id t! i i j. H- n r. i-t ■
7. Open an existing image in
Photoshop Elements that includes
multiple layers, such as the banner
shown in this task.
Part II: Putting the Pages Together
Ch
DropBookS
thi
2. Choose WindowOLayers to open the
yers panel. In the Layers panel, click
select the layer you want to edit. In
this example, I selected the layer that
corresponds to the words Hollywood
Bar Secrets.
EFFECTS
LAYERS
pacity: 10
et Life of a Hollywood Bartend.
Hollywood Bar Secrets
h i
White BG
rrl
\
i
m
Ml .
Hollywood
The Secret Life of a
3- In the Toolbox, select the tool that you need
in order to edit the contents of the layer. In
this example, I selected the Text tool so that
I can edit the words.
4- Use the selected tool to alter the selected
image. In this example, I double-clicked the
name Hollywood to select it and then typed
the name Los Angeles in its place.
Chapter 5: Editing and Creating Web Graphics ^3
5. To edit text in another layer, you
must again select the correspond-
ing layer in the Layers panel. In this
example, I selected the layer that
contains the text in the second line
of the banner image. Because I had
already selected the Text tool, after
the layer was selected, I simply
selected the text I wanted to edit
and replaced it by typing new text.
! ▼ Sign In Create New Adobe ID
File Edit Image Enhance Layer Select Filter View Window Help
tit m &
New
Open... Ctrl+O
Open As... Alt+CtrH-0
Cj Reset
(Auto)
• of a Hollywood Bartender. RGB/81 *
6. After you make changes to the text,
choose FileOSave As and give the
image a new name. This step saves
the changes without altering the
original image.
Enlarging and reducing image display
As you're working on images in Photoshop
Elements, it's often helpful to enlarge or
reduce the display size of the image so that
you can view more of it on the screen or to
zoom in on details you want to edit. You can
use the Zoom tool to increase or decrease
the size at which the image appears on your
screen.
First, click to select the Zoom tool from the
Toolbox; then click anywhere on the image
to increase its display size. Alt+click (in
Windows) or Option+click (on the Mac) to
decrease the display size.
Tip: By changing the display size, you can
figure out how much you may need to
change the actual size of your image to
make it appear the way you want on a com-
puter screen. To do so, use the Zoom tool
to size the image the way you want in your
Web page, and then notice the percentage
(displayed at the top of the screen, next to
the filename). Then you know the number
you need to enter in the Size field in the
Image Size dialog box when you resize it
using a percentage.
To redisplay the image in its true size on
your monitor, double-click the Zoom tool.
Part II: Putting the Pages Together
DropBooks
Chapter 6
DropBQateg Started with Dreamweaver
Tasks Performed
in This Chapter
Setting up a new or
existing sue
Defining a Web site in
ureamweaver
Creating new Web pages
Setting links in
Dreamweaver
Changing page
-wide
settings with page
properties
Adding meta tags for
search engines
Adding code from
YouTube, Google, and
other sites in
Dreamweaver
The high-end features in Dreamweaver make it the preferred
choice for professional Web designers, but its easy-to-use
graphical interface makes it popular among novices and hobby-
ists as well. This book is designed to help you create a Web site as
quickly as possible by providing you with templates for a variety
of common Web sites and instructions for how to customize those
templates in Dreamweaver. If you're eager to get started, feel free
to jump ahead to Chapters 7, 8, or 9, where you find instructions for
using Dreamweaver to customize the ready-to-use templates that
come with this book.
Before you do, though, I suggest that you at least skim through this
chapter so that you have some familiarity with the most important
features in Dreamweaver, how I've used Dreamweaver's advanced
template features to help you create sites quickly, and how you
can edit those templates with this great Web design program. This
chapter is designed to introduce you to Dreamweaver and to show
you how to do some the most common tasks with this popular
design program, such as creating new pages, inserting images, set-
ting links, and defining CSS styles.
At the beginning of this chapter, you find detailed instructions for one of the most
important features in Dreamweaver: the Site Definition dialog box. Defining a site
in Dreamweaver is important whether you use one of the templates featured later
in this book or create your own, custom design using the instructions in the rest of
this chapter. Before you work on any Web site in Dreamweaver, you should start
with the site-definition process.
In my effort to keep things simple in this book, I cover only a small portion of the
features in this complex program. You can read lots more about Dreamweaver in
my book Dreamweaver CS4 For Dummies (Wiley).
Setting Up a AJeu/ or Existing Site
As a general rule, when you create a Web site, you first create all the pages on your
computer's hard drive, where you can preview your pages in a Web browser and
Part II: Putting the Pages Together
DropBocms
test the site before it's visible on the Internet. Then, when the site is ready, you
transfer the files to your Web server, a computer with a permanent connection to
the Internet that uses special software to communicate with Web browsers, such as
Inteinet Explorer, Safari, Chrome, and Firefox.
1 the files you work with on your hard drive must be in the same relative
location on the Web server, you need to store all your site's resources in one folder
on your hard drive and identify that folder as the local root folder in Dreamweaver.
As you progress through the site-definition process in the following task, you can
create a new folder on your hard drive and designate it as your local root folder, or
you can identify an existing folder if you're updating or redesigning a site. The loca-
tion where you save the local root folder on your hard drive doesn't matter, as long
as you identify it as the main folder for your Web site in Dreamweaver. Note: If you
move the local root folder, you have to go through the site setup process again so
that Dreamweaver knows where to find it.
When you're ready to publish a completed site, you can transfer it to your Web
server by using the Dreamweaver built-in File Transfer Protocol (or FTP) features.
You find detailed instructions for testing and publishing a Web site in Chapter 10.
Throughout this book, I use Adobe Dreamweaver CS4, but most of the features
I cover have not changed much in the last few versions, so even if you're using
another version of Dreamweaver, such as 8 or CS3, you should be able to follow
most of these instructions with few, if any, adjustments. Just be aware that some
panels and other options may be in different locations in earlier versions.
Working With an existing Web site
If you're working on redesigning or editing
an existing site, your first challenge is to
get a copy of the site on your hard drive.
Fortunately, Dreamweaver can help you
download an existing site off a Web server
with the same features you use to publish
a site. All you need is the login information,
username, and password to access the Web
server.
To download an existing site, first complete
the site setup process featured at the begin-
ning of this chapter. Then create a new,
blank folder where you can store all files in
the Web site on your local hard drive. Follow
the instructions in the section "Setting Up
FTP in Dreamweaver" in Chapter 10 to con-
nect Dreamweaver with your server. After
you establish a connection, just select all the
files on the server and click the Get button
(also shown in Chapter 10) to download all
files in the existing site.
After you have your site on your hard
drive, you can edit and add pages using
Dreamweaver just like you would edit any
other files on your computer, even if the site
was created in another Web design program.
Keep in mind, however, that if you're doing
a major redesign of an existing site, you
might be better off to start from scratch. In
that case, you can download the existing site
into one folder, and then create a new site
in another root folder in Dreamweaver. With
both the old and new versions of a site on
your hard drive, it's easy to copy the exist-
ing text, images, and other materials into the
new pages as you create the new site.
Chapter 6: Getting Started with Dreamweaver ^ *J
Defining a Web Site in DreamWeaver
\J — Stuff i/ou —
Need to Know
Toolbox:
Dreamweaver CS4
j> If you have them ready,
any text, images, or other
materials you want to
use in a new or existing
site
Time needed:
Less than an hour
If the site-definition process seems a little confusing at first, don't
worry; it's a quick, relatively painless process, and you have to do it
only once for each site. Just trust me — don't skip this preliminary step.
Whether you're creating a new site or working on an existing site, the
following steps walk you through the process of defining a local root
folder for your Web site.
File Edit View Insert Modify Format Commands
Site I Window Help
New Site...
Manage Sites.
Dw
ADOBE DREAMWEAVER CS4
Open a Recent Item
Get
Check Out
Put
Check In
Undo Check Out
Show Checked Out By..
Locate in Site
Site Definition for Unnamed Site 2
Advanced
Basic
Category
Local Info
Remote Info
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Local Info
Browse icon
-23.
nnamed Site 2
Site name: JJ
Local root folder : c : \Users\ Artesian Media PC\Documents\Unnamed
Default images folder:
Links relative to: O Document Site root
HTTP address: http://
This address is used for site relative links, and for
the Link Checker to detect HTTP links that refer to
your own site
Case-sensitive links: □ Use case-sensitive link checking
Cache: [7] Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
OK
Cancel
Help
7. Choose SiteONew Site to open the Site
Definition dialog box.
2. Click the Advanced tab. Note: If you prefer,
you can use the basic wizard that steps you
through the setup process, but I find it faster
and easier to view all the options at once
from the Advanced tab.
3- In the Category box on the left, make sure that the Local
Info category is selected so that you can specify the loca-
tion of the folder on your local hard drive. This category
should be open by default when you click the Advanced
tab. (You find instructions for setting up the options in the
Remote category so that you can publish your site to a
Web server in Chapter 10.)
Site Definition for Ur
Basic
Advanced
Category
Local Info
Remote Inf
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Part II: Putting the Pages Together
Site Definition for Pamela's Pet Services
Basic ^'Stanced
Remote Info
Testing Server
Version Control
Cloaking
Site name:
rnela's Pet Services
Local root folder : C : \Users\Artesian Media PC\Docu
5. Click the Browse icon next to the Local Root
Folder text box to locate the folder on your hard
drive that you want to serve as the main folder for
all files in your Web site. (Hint: The Browse icon
in Dreamweaver always looks like a small, yellow
file folder and is usually located at the right side of
a text field.) If you're setting up a new site, create a
new folder on your hard drive, using the Create
New Folder icon in the Choose Local Folder dialog,
and then select that folder as the local root folder.
If you're setting up an existing Web site, select the
folder that contains the files for that site to desig-
nate it as the Local Root Folder.
In the Site Name text box, type a name for your
site. You can call your site whatever you like; this
name is used only to help you keep track of your
sites. Many people work on more than one site in
Dreamweaver, and this feature enables you to
keep track of them by name. The name you enter
here appears in the drop-down list in the Files
panel and in the Manage Sites dialog box. You use
this list to select the site you want to work on
when you open Dreamweaver. In this example, I
named the new site Pamela's Pet Services.
Local Info
Site name:
Local root folder:
Pamela's Pet Service
C:\Users\Artesian Media PC\Documents\web sites
Default images folder:
l Choose local images folder for site Pamela's Pet Services:
Select: . Pamela's Pet Services ▼ 0 & P? HH)' r
Name Date mo... Type Size Tags
[ images j services
Recent Places
Desktop
■
Artesian Media
PC
Computer
Network Select:Pamela's Pet Services
Open
Cancel
6. Click the Browse icon next to the Default Images
folder field and then select the images folder in
an existing Web site. If you're creating a new
site, create a new folder inside your local root
folder, name it images, and select it. Although
you don't have to identify an images folder, it
has some advantages. For example, if you ever
insert an image that isn't located in your local
root folder, Dreamweaver copies it into the
images folder you identify during the site setup
process. If you create an images folder,
Dreamweaver copies images into the main
folder. (You can also store images in other fold-
ers within your local root folder.)
7. For the Links Relative To radio buttons, leave the
Document option selected unless you know that you
want vour links to be set ud relative to the root level of
Links relative to: >o> Document Site root
HTTP address: htEpi//
Document is the simplest option and should already be
selected because it's the default option in Dreamweaver.
your site. This setting controls how the path is set in
links. If you're working on a site with other developers
and you're not sure, check with your colleagues. If
you're working alone on your own site, Links Relative to
Chapter 6: Getting Started with Dreamweaver tyty
Links relative to: a Document Site root
HTTP address: http://www.pamelaspetservices.comJ
sed for site relative links, and for
to detect HTTP links that refer to
your own site
8. In the HTTP Address text box, type the URL of
your Web site. The HTTP address is the URL, or
Web address, that your site will have when it's
published on a Web server (see Chapter 2). If
you don't yet know the Web address for your
site or you don't plan to publish it on a Web
server, you can leave this box blank. If you do
fill it in, include http : / / at the beginning and /
at the end.
9* Select the Use Case-Sensitive Link Checking check box.
Unless you know for sure that you don't have to worry
about the case of your filenames, selecting this box
makes Dreamweaver ensure that the case matches for
all your site's links (which many Web hosting services
require).
Case-sensitive links: 5] Use case-sensitive link checking
Cache: gfEnable cache
Case-sensitive links: J Use case-sensitive link checking
Cache: Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
10.
Select the Enable Cache option. Dreamweaver
creates a local cache of your site to quickly refer-
ence the location of files in your site. The local
cache speeds up many site management features
of the program and takes only a few seconds to
create.
/ 7. Click OK to close the Site Definition dialog box and save
your settings. If the folder you selected as your local
site folder already contains files or subfolders, they're
automatically cached and any files or folders in your
site are displayed in the Files panel. In this example,
because I'm creating a new site, only the images sub-
folder is displayed. If you haven't checked the Enable
Cache option, a message box appears, asking whether
you want to create a cache for the site. Doing so is good
practice because it helps Dreamweaver work more
efficiently.
HIES | ASSETS |
fr^ Pamela's Pet Service: ▼
| Local view ▼]
& o
0 ft #
ft ®
Local Files
Size
Type
EM^ Site- Pamela's Pe...
^EB--(2) images
Folder
Folder
3
3
You can make changes and additions to a site by choosing SiteOManage Sites, selecting the site name in the
Manage Sites dialog box, and then clicking the Edit button. The defined site then opens in the Site Definition
dialog box, where you can make changes to any setting, such as selecting a different images folder or local
root folder. Remember that if you move the local root folder on your hard drive, you need to edit the site defini-
tion to identify the new folder location.
Part II: Putting the Pages Together
INSERT
CSSSTYIES
AP ElEMENTS
HIES ASSETS
Karen Ward
MakesVouCrazy.com
Mark Jenkins
O Matthew Mitchell
Ir^ Michael York
Our Warner Family
Pamela's Pet Services
Ir^ Reputation Blog
Ir^ Russia
12. if you work on more than one site in Dreamweaver, be sure to
define each site the first time you work on it. After that, you can
easily switch among defined sites by selecting the one you want
to work on in the Files panel. You can define as many sites as
you like in Dreamweaver. To load a different site into the Files
panel, click the drop-down arrow next to the site name and
choose the name of the site you want to display. In this figure,
you can see that I'm opening the site named Pamela's Pet
Services by selecting it from a long list of defined sites.
Naming Web pages
Filenames are especially important in Web
sites because they're included in the HTML
code when you set links. Over the years,
I have received more e-mail messages
from panicked Web designers because of
broken links caused by filename conflicts
than almost any other issue. Because these
problems usually don't occur until after
a Web site is published on a server, they
can be especially confusing and difficult to
understand. Following a few simple point-
ers can help you avoid or troubleshoot
filename-related problems:
When you save Web pages, images, and
other files for your site, the basic rule is
to not use blank spaces or special char-
acters in a filename. For example, don't
name a Web page with an apostrophe,
such as cat ' s page . html. If you want
to separate words, you can use an
underscore (_) or a hyphen (-). For exam-
ple, cat-page . html is an acceptable
filename. Numbers are okay in most
cases, and capital letters don't generally
matter, as long as the filename and the
code in the link match.
The potentially misleading point is that
links with spaces and special characters
work just fine when you test pages on a
Mac or PC, but the software used on
many of the Web servers on the Internet
don't accept spaces or special charac-
ters in links. Thus, links that don't follow
these rules can be broken when you
publish the site to a Web server.
All files in a Web site must also include
an extension at the end of the filename
to identify the file type (such as .html
for HTML files or . jpg for JPEG images).
Dreamweaver automatically adds the
. html file extension to the end of HTML
files, but you may need to change your
Windows settings if you want to be able
to see the extension. Similarly, pro-
grams like Photoshop automatically add
the extension on Windows computers; if
you're using a Macintosh, you may need
to add the extensions manually.
Another confusing rule, and one of the
most important, is that the main page
(or frontpage) of your Web site must be
named index.html or default.html,
depending on your Web server. Most
Web servers are set up to serve the
index.html page first. To ensure that
you use the correct name, check with
your service provider or system admin-
istrator. (Some servers are set up to
handle home . html, or default . asp for
dynamic sites, but most commercial ser-
vice providers serve index.html before
any other page in any folder in a site.)
The rest of the pages in your site can be
named anything you like, as long as they
don't include spaces or special charac-
ters (except for the dash or underscore).
Chapter 6: Getting Started with Dreamweaver
Creating Aleut Pages in breamWeatfer
Need to Know
Toolbox:
Adobe Dreamweaver CS4
w Your own text to person-
alize the pages
Time needed:
Less than half an
hour
In this task, I show you how easy it is to create a new page in
Dreamweaver and add and format text. Whether you're creating a
simple design or a complex one, it's almost always easier to start with
one of the prestyled Cascading Style Sheet (CSS) layouts included in
Dreamweaver. You can use Dreamweaver's collection of layouts to
create a variety of one, two, and three-column designs using CSS, and as
you see in the steps that follow, you can customize these layouts in
many ways. Before you rush off to take a look at all the layouts included
with Dreamweaver, let me warn you that they're not much to look at
when you first open them. They're intentionally designed with a basic,
gray color scheme. Fortunately, though, color styles are some of the
easiest to alter in CSS.
If you're new to CSS, altering one of these layouts may seem confusing at
first, but it's certainly easier than starting a page layout from scratch your-
self. In this chapter, I focus on a simple, one-column design, a great way to
practice the basics before you get into the steps you'll need to follow to
customize the more complex layouts included in the templates later in this
book. Before you begin creating new pages, make sure that you complete
the site setup process covered in the preceding task in this chapter.
7. To create a new page, choose FileO
New. In the New Document dialog
box that opens, choose Blank Page
from the options on the far left (as
shown here). Under the Page Type
column, you can now select from
many different file types, including
HTML, XML, and PHP. To create a
simple Web page, like the one I use
throughout this book, choose HTML.
New Document
Blank Page
Page Type:
Blank Template
Page from Template
Page from Sample
Other
HTML
HTML template
Library item
XSLT (Entire page)
~* XSLT (Fragment)
ActionScript
£ ess
~* JavaScript
~ XML
ASP JavaScript
ASP VBScript
°Tr ASP.NET c#
ASP.NET VB
""" ColdFusion
ColdFusion component
~ JSP
® PHP
Help [ Preferences...
Layout:
<none>
1 column
1 column
1 column
1 column
1 column
1 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
elastic, centered
elastic, centered, header anc
fixed, centered
fixed, centered, header and I
liquid, centered
liquid, centered, header and I
elastic, left sidebar
elastic, left sidebar, header a
elastic, right sidebar
elastic, right sidebar, header
fixed, left sidebar
fixed, left sidebar, header an
fixed, right sidebar
fixed, right sidebar, header a
hybrid, left sidebar
hybrid, left sidebar, header a
hybrid, right sidebar
hybrid, right sidebar, header
liquid, left sidebar
liquid, left sidebar, header an
liquid, righ t sidebar
III ►
<No preview >
HTML document
DocType:
Layout CSS: |AddtoHead
Attach CSS file:
XHTML 1.0 Transitional ▼
□
Get mote content.
Create
Cancel
A fixed layout is generally an easier option to start with, but "liquid" designs have advantages because they're
more flexible. You can find a longer description of the layout types in the Dreamweaver Help files, but essen-
tially here are the options. Liquid layouts are designed to expand and contract, depending upon the size of the
browser window; fixed layouts are centered within the browser and set to a width of 780 pixels (easy to
change); elastic layouts use the EMs measurement to adapt to different text sizes and other variations in dis-
play; and hybrid layouts use a mix of options.
Part II: Putting the Pages Together
DropBooks
2. When HTML is selected in the New Document
dialog box, a list of CSS layouts appears in the
Layout Column. In the close-up view of this
dialog box, shown in this figure, you can see
that I selected a design that creates a one-
column fixed layout with a header and footer.
The rest of the options in this dialog are
optional, so keep things simple and just
click the Create button.
Layout:
<none>
1 column elastic, centered
1 column elastic, centered, header anc
1 column fixed, centered
1 column fixed, centered, header and
1 column
1 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
2 column
4
liquid, centered
liquid, centered, header and I
elastic, left sidebar
elastic, left sidebar, header a
elastic, right sidebar
elastic, right sidebar, header
fixed, left sidebar
fixed, left sidebar, header an
fixed, right sidebar
fixed, right sidebar, header a
hybrid, left sidebar
hybrid, left sidebar, header a
hybrid, right sidebar
hybrid, right sidebar, header
liquid, left sidebar
liquid, left sidebar, header an
liquid, right sidebar
►
u
One centered column, width in pixels, with
header and footer.
DocType:
Layout C5S:
Attach CSS file:
XHTML 1.0 Transitional ▼
Add to Head
[
> w d~ a- a-
File Edit View Insert
Modify Format Commands Site
Window Help
index.html x 1
,/\ Code
^ Split
Design , Live View ▼ ^tfMgfadeJ
Title: Pamela's Pet
Servicesl
1°
50
100 ,
1150 . 200 , 250 , 300 ,
350 , 400 45C
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 II
LLi
iUr — ■
o :
c; ■
Header
3- Get into the (excellent) habit of
saving a new page as soon as it's
created. Choose FileOSave and give
the file a name. Remember, don't
use any spaces or special charac-
ters in the filename, and be sure to
retain the . html extension. I
named this file index . html
because it will serve as the first
page of my site. As soon as you
save the file, it's also good practice
to add a title right away by replac-
ing the words Untitled Page with
your own title at the top of the
workspace, as you see in this
figure.
4- Adding or editing text in a new
page in Dreamweaver is relatively
simple. For example, if you want to
change the text at the top of the
page, just select the word Header
and type in the text you want to
use to replace it. In this case, I
entered Pamela's Pet Services.
Because I selected the Header first,
the font, style, and size of the text
in the original layout are preserved.
Replace the subheadings and main
text in the page in the same way.
index.html* x |
,,>! Code
^ Split
Design j*J Live View
▼ Title; Pamela's Pet Services
100 , 1150 1200 ,
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
250 , 300 , 350 , 40« , 450 , 500 5
o :
Pamela's Pet Services:
5 :
0 -
1 -
0 -
0^
1 -
5 -
M "
Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesen
convallis luctus rutrum, erat nulla fermentum diam, at nonummy <
t J C 1 ! 1 1 1 ! ! 1 1 1 '
Chapter 6: Getting Started with Dreamweaver J Oj
Inserting text from another program
DropBaote;
ives you many options for
matting when you copy
and paste text from another program. You
can change the default method for how
Dreamweaver handles formatting when
you choose EditOPaste and alter the prefer-
ences in the Copy/Paste category. And, you
can choose EditoPaste Special to make all
options available each time you paste new
content. Here are your six options:
Text Only: Dreamweaver strips any for-
matting and inserts plain text.
is Text with Structure: Dreamweaver
includes paragraphs, lists, tables, and
other structural formatting options.
Text with Structure Plus Basic
Formatting: Dreamweaver includes
structural formatting as well as basic
formatting, such as bold and italic.
Text with Structure Plus Full Formatting:
In addition to the previous options,
Dreamweaver includes formatting cre-
ated by style sheets in programs such as
Microsoft Word.
Retain Line Breaks: Selecting this check
box ensures that line breaks are pre-
served, even if you don't keep other for-
matting options.
Clean Up Word Paragraph Spacing: This
option is designed to address a common
problem in the way Microsoft Word
paragraph spacing is converted when
content is pasted into an HTML file.
5- All Dreamweaver layouts include a collection of corre-
sponding styles. As a result, to edit many of the ele-
ments, such as the background color of the header area,
you must edit the corresponding style. First, open the
CSS Styles panel (if it's not already open) by choosing
WindowOCSS Styles, and then click the plus (+) sign next
to <style> (or whatever the external style sheet is
named) to open it. Dreamweaver displays all styles that
correspond to the style sheet associated with this page.
(Tip: Make sure that the All button is selected at the top
of the CSS Styles panel to display all styles.)
CSSSTYIES | AP ELEMENTS -=
All Current
All Rules
□ <style>
— body
— .on eColFixCtrHdr ^con tainer
— .oneColFixCtrHdr #header h
— .oneColFixCtrHdr #mainContent
— .oneColFixCtrHdr #footer
1 — .oneColFixCtrHdr #footer p
Properties for ".oneColFiicCtrHdr tthe-ader"
background
#DDDDDD
padding
0 lOpx 0 20px
Add Property
1= M **+
<g@ -E3 ^ En?
/ 0 P art " : Putting the Pages Together
6.
Drop
To change the color or other style options
for the header, double-click the style named
r rE^r #header to open it in the
Jgtyiialog box. Click to select
the BackgrouncT category, and use the color pal-
ette to change the background color. Choose
the Type category to access font, size, and other
text options. Click Apply to see how the settings
look, and then click OK to save them and close
the dialog box.
CSS Rule definition for .oneColFixCtrHdr tfheader
S2
Category
Type
Backaround
Block
Box
Border
List
Positioning
Extensions
Background
Background-color: [~~^ #FFF
Background-image:
Background-repeat:
Background-attachment :
Background-position (X):
Background-position (Y):
| | 8FFF 0 0
Hi
1 1 1 1 1 1 1 1 1 1 1 1 1 F FFff
Help
OK
Cancel
Apply
CSS STYLES [_AP ELEMENTS
All
Current
All Rules
□ <style>
|— body
— .oneColFixCtrHdr #container
— .oneColFixCtrHdr #header \^
— .oneColFixCtrHdr #header hi
— .oneColFixCtrHdr #rnainContent
— .oneColFixCtrHdr #footer
1 — .oneColFixCtrHdr #footer p
Properties: for ".oneColFiHCtrHdr ^container"
background
#FFFFFF
border
lpx solid #000000
margin
0 auto
1 rp'v'h-.Hlinn 1
UFh ^^^^^^
:i= *z+
e
7. To change the width of the one-column layout, you need
to edit the Div tag that surrounds all the content on the
page. By following the common practice of using Div
tags to "contain" elements on a page and styles, to
describe how they should be displayed, Dreamweaver
includes a Div identified as container in every layout.
The container controls the overall width of the design
area; to change the width of your design, you need to
change the corresponding style. To do so, double-click
the style named . oneColFixCtrHdr #container to
open it in the CSS Rule Definition dialog box. (The Div is
the foundation of the box model, which I explain in
Chapter 4.)
This is an advanced tip. If you don't like the compound styles used in Dreamweaver layouts, you can simplify
them. Dreamweaver includes a body class for each of these layouts and includes it in the name of each
style. In this case, the body class is oneColFixCtrHdr. You can remove the body class by deleting
. oneColFixCtrHdr from the front of each style name, but if you do so, you must also delete it from the
body tag in the HTML code. To do so, first click the Split View button at the top of the workspace to open the
HTML code, and then search for the body tag and delete class= " oneColFixCtrHdr " . Although remov-
ing the class style is optional, it simplifies the rest of the style names by making them all shorter, which many
designers find easier when working with style sheets. To save you from having to find the body tag in the HTML
code, I leave the longer style names the way Dreamweaver creates them in this task.
Chapter 6: Getting Started with Dreamweaver J 05
8.
In the CSS Rule Definition dialog, choose Box
from the Category list (left) and then use the
width field to change the width as desired. In this
e, I'm chatiging the width from 780 pixels to
^I^rV^Tp num t )er m tne Width field,
lttng ore wiafrrof your page to 780 pixels is
good practice if you want your page to display
well in an 800 x 600 resolution monitor, but most
Web designers today design for a monitor resolu-
tion of 1024 x 786 and a width of 980 is well
suited to that size, leaving just enough room for
scrollbars and other elements of the browser
that take up space on the screen. Click Apply to
preview your changes, and then click OK to save
your changes and close the dialog box.
CSS Rule definition for .oneColFixCtriidr ^container
Category Box
Type
Background
Block
Border
List
Positioning
Extensions
Width: 9^0
px
Height:
Padding
Top:
Right:
Bottom:
Left:
px
H Same for all
Help
Float:
Clear:
Margin
px ▼
▼
px
▼
px
px ▼
3 Same for all
0 ▼
auto ▼
px
0 ▼
▼
auto ▼
px w
OK
Cancel
Apply
CSS Rule definition for body
Category Type
Background
Block
Box
Border
List
Positioning
Extensions
1
Ld
Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, s
Courier New, Courier, monospace
erif
Arial, Helvetica, sans-serif
Font-family:
Font-size:
Font-style:
Line-height: Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Text-decoratio Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive
Garamond, Times New Roman, sans-serif
Edit Font List...
]
Help
OK
Cancel
Apply
You can also change the font or color of any or
all text on a page by changing the corresponding
styles. If you aren't familiar with HTML, you may
not guess that to change the font style for the
entire page, you need to alter the Body style.
That's because the <body> tag controls page-
wide settings, like font face and link styles. You
can use multiple fonts on a page by changing the
font style for a specific section of text, but to
change the default font for the entire page,
double-click Body in the CSS Styles panel,
choose the Type category and use the Font-
family drop-down list to select a font collection.
If the body tag isn't already defined with a style, you might find it easier to use the Page Properties dialog box,
described in the section, "Changing Page-Wide Settings with Page Properties," later in this chapter. For more
information on font collections and using XHTML and CSS together, see Chapter 4.
/ 00 ^ art "■ P utt ' n 9 the Pages Together
Drop 3CfiQte
might be cor
Adding paragraphs and tine breaks
ate page designs for the Web,
k within many limitations that
might be confusing at first, even if they
serve a purpose. How you create paragraph
and line breaks is a good example.
If you're working in Design view in
Dreamweaver and press Enter (Windows)
or Return (Mac), Dreamweaver inserts a <p>
(Paragraph) tag in the code, which creates
a line break followed by a blank line. If you
want a line break without the extra blank line,
hold down the Shift key and press Enter or
Return; Dreamweaver inserts the <br /> tag
into the code, to create a single line break.
If you want to add a lot of space, press
Enter or Return multiple times to have
Dreamweaver insert <p>  ; < /p>.
These Open and Close paragraph tags have
a nonbreaking space in the middle.
You can also add space to a page by using
margins or padding settings in CSS styles.
You find instructions for working with these
style options in the section, "Creating New
Pages in Dreamweaver," earlier in this
chapter.
Note that you can add as much space as
you like to HTML code without changing the
page design. If you're working in Code view
in Dreamweaver, you can add space within
the code by pressing Enter or Return with-
out affecting the way the page appears in a
Web browser.
Chapter 6: Getting Started with Dreamweaver
Inserting Images in breamuteatfer
— Staff jlou
Need to Know
Toolbox:
v 0 Adobe Dreamweaver CS4
A Web site with a root
folder defined in
Dreamweaver
w AGIFor JPEG image
(sample images are avail-
able at this book's com-
panion Web site at www.
DigitalFamily .
com/diy)
Time needed:
Less than half an
hour
You can add images in the JPEG, PNG, or GIF format to your pages in
Dreamweaver. In Chapter 5, you discover how to optimize images for
the Web. In this task, you learn how to insert image into a Web page in
Dreamweaver.
0 :
1 -
S -
u:
P pO \W0 \iS0 £00 PSO [300 350 , 400 450 |50G |550 \k00 \kS0 \700
1
II
We treat your loved ones like family."
■I
m
<body.oneColFixCtrHdr> <div#container> <div#header> <hl>|<imq>|
k 1 Q» 100% v 743 x 213 v 86K/13sec Unicode (UTF-8)
PROPERTIES
Image, 82K ^ 98n
ID H 150
Src irnelas-Pet-Services.jpg Q Alt Pamela's Pet Servio | ^ Class oneColFi... ▼
Link {^q Edit & j>
h For many designs, such as the one featured in this task
for Pamela's Pet Services, you may want to use a graphic
instead of text in the Header. First, simply delete the text
in the Header area, and then choose InsertOlmage to
select the graphic you want to use in its place. If you
insert a graphic that's not in your local root folder,
Dreamweaver automatically copies it into your images
folder. Unless you have Accessibility Attributes turned
off in the Dreamweaver preferences, you're also
prompted to enter alternate text. Type a description of
your image in the Alternate text field in the Image Tag
Accessibility Attributes dialog box. Alternatively, you
can click to select any image and type a description into
the Alt field in the Property Inspector.
Alternate text, which is displayed if an image isn't visible, provides a description of the image for visitors who
are visually impaired and use special browsers that "read" Web pages aloud. Including key words in Alt text can
also make your page more search engine friendly.
/ 08 Part " : Puttin 9 the Pages Together
DropBooks
zs like family."
CSS STYLES
ent aliquam, justo convallis luctus rutrum, erat
snas urna purus, fermentum id, molestie in,
Drnare risus quis ligula. Phasellus tristique purus a
e, rhoncus venenatis, tristique in, vulputate at,
-« ' ' — ■ aa
Current
All Rules
B <style>
—body
— .oneColFixCtrHdr #container
— .oneColFixCtrHdr #header
— .oneColFixCtrHdr #header hi
— .oneColFixCtrHdr #mainContent
— .oneColFixCtrHdr #footer
' — .oneColFixCtrHdr #footer p
Properties for ".oneColFixCtrHdr ttheader"
background-color \ #FFF
Add Property
lOpx 0 20px
2. Although I changed the width of the
layout to match the width of my
banner (in the previous task), the
banner didn't line up properly when
I inserted it into the header. That's
because the header is styled for text
and includes padding to better posi-
tion the text away from the sides of
the layout. To make an image, such
as this banner fit in the header prop-
erly, you need to remove the extra
space. First, click the style named
. oneColFixCtrHdr #header in
the CSS Styles panel. Then expand
the Styles panel to display the
Properties for the #header style
and delete everything in the padding
field by selecting it and pressing the
Delete key.
3- Even after deleting the padding, you're still likely to
have extra space at the top and bottom of the banner;
this space is caused by the Hi tag attributes that make
the header text large and bold. If you deleted the Hi tag
when you deleted the text, you won't have this problem,
but it's easy to leave the HI tag behind. Here's a good
way to remove any unwanted HTML formatting. First,
click to place your cursor in the Header area. (It doesn't
matter whether you select the image). Then in the tag
selector at the bottom of the workspace, right-click the
Hi tag and choose Remove Tag.
Quisque or
am leo pede
Suspendisse
eget purus.
et, cursus et
nec nec liber
Remove Tag
Quick Tag Editor...
Set Class
Set ID
Code Navigator...
Convert Inline CSS to Rule,,.
Collapse Full Tag
Collapse Outside Full Tag
► y.
<div#header> (<hl >Rirnq>
k 1^5 q I ioo%
File Edit View Insert Modify Format
Tag,..
index.html x
, <t\ Code
i =
i =
■ -
i -
i =
Split
50
Pet B<
Lorern ipE
nulla ferrr
comrriodo
Image
Image Objects
Media
Hyperlink
Email Link
Named Anchor
Date
Commands Site
Ctrl + E
Ctrl + Alt +1
►
►
Table
Ctrl+Alt+T
Table Objects
►
Layout Objects
►
Form
►
Ctrl + Alt + A
4- To insert an image in an area of the page
where you have text, click to place your
cursor where you want the image to appear
and then choose InsertOlmage. Find the
image you want to insert on your hard drive
and double-click to select it. If it's not
already in your root folder, click Yes to let
Dreamweaver copy it into the main folder of
your site. Finally, add a text description in
the Alternative text field in the Image Tag
Accessibility dialog and then click OK. The
image appears in the page, forcing any text
down below it.
Chapter 6: Getting Started with Dreamweaver
5.
To align an image to the right or left
and wrap the text around it, your
best option is to use a CSS style. In
he templates included with this
^^Jifc^Qof the CSS
yo*ms rrrcludeJhwith Dreamweaver,
you'll find styles with the name
f ltrt (or float-right) for aligning
images to the right, and f It If t (or
float-left), for aligning images to the
left. To use these styles, first click
to select the image. Then, in the
Property Inspector, click the Class
drop-down list and choose the
alignment style you want to use. In
this example, I selected f ltlf t.
2 -
0 -
0^
4_
0 -
0;
4
5 -
0 -
5 ;
0 -
o -
ns — ; — iso ' — [too - ; — (istr; — pro- — 1250 - ; — 1500- — nsij-, — mm, — mm, — s
I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I M I I M I 1 I i I I I I I I I [ I I I I I I I I I I I I I I I I I I I I I 1 I I :l I I I I M I 1 I I I I I I I I
T55S
■
-mr
J00
'''I'll'
Pet Boarding Services
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
convallis luctus rutrum, erat nulla fermentum diam, at n>
quam. Maecenas urna purus, fermentum id, molestie in,
Nam blandit quam ut lacus. Quisque ornare risus quis lic-
purus a augue condimentum adipiscing. Aenean sagittis.
venenatis, tristique in, vulputate at, odio. Donee et ipse
nonummy. Suspendisse potenti. Fusee varius urna id que
eget, tincidunt nec, suscipit id, libera. In eget purus. Ve
mi sed turpis feugiat feugiat. Integer turpis arcu, pellen'
fermentum ut, sapien. Fusee metus mi, eleifend sollicitu
et, nibh. Donee nec libera.
Pamper Your Pet with Our Groomii
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
convallis luctus rutrum, erat nulla fermentum diam, at n<
quam. Maecenas urna purus, fermentum id, molestie in,
Nam blandit quam ut lacus. Quisque orna r" ,,r
purus a augue condimentum adipiscing. A' Nl
venenatis, tristique in, vulputate at, odio.
flirt
oneColFixCtrHdr
<body. oneColFixCtrHdr > <div#container> <div#mainContent> <d > I <img . f ltlf 1 2
'J 100% v 762x471 v 177K
PROPERTIES
_
Rename.
Image, 91K
ID
W 250
H 383
Src images/Yawn. jpg
Link
<5>t3
Alt
Edit
Class fltjft
(9\
CSS STYLES
[ AP El
IEMEHT5
[
All
Current
All Rules
□ <style>
— body
— .oneColFixCtrHdr ^container
— .oneColFixCtrHdr /header
— .oneColFixCtrHdr #header hi
— .oneColFixCtrHdr #rnainContent
— .oneColFixCtrHdr #footer
— .oneColFixCtrHdr #footer p
— .fltrt
.fltlft
Properties: for '.fltlft'
float
left
margin-right
h — -
Add Property
6. The alignment styles, such as float-right and
float-left, include a margin setting of 8 pixels
(px) to create a small margin between an
image and any text that wraps around it
when it's aligned to the left or right of a page.
You can change the margin settings to
increase or decrease this space by clicking
to select the style in the CSS Styles panel,
and then changing the number of pixels in
the Properties pane. Alternatively, you can
double-click the style name to open the CSS
Rule definition dialog and change the margin
settings in the Box category.
You can adjust the margins and padding around images, Div tags, and other elements to control spacing and
positioning. The simplest way to understand padding and margins is to remember this statement: Padding adds
space to the inside of an element, and margins add space to the outside. The same statement is true whether
the element is a Div tag, an image, a table cell, or anything else. If you want more space around a photo, for
example, add margin space. If you want a gap between the edge of a Div tag and its contents, add padding.
Here's an advanced tip: When you add padding, you increase the overall size of the element. For example, a
photo that's 200 px wide and has 1 0 px of padding on each side expands to fill 220 px of space in the design.
Part II: Putting the Pages Together
Setting Links to Other Pages in \lour Site
stuft you
Need to Knou)
Toolbox:
\* Adobe Dreamweaver CS4
A Web site with a root
folder defined in
Dreamweaver and more
than one page that you
can set the linkto
Time needed:
Less than
15 minutes
Dreamweaver is truly a dream when it comes to setting links. The most
important thing to keep in mind is that a link is essentially an address (a
URL) that tells a visitor's browser which page to open when the visitor
clicks the text or image containing the link.
If the page you want to link to is within your Web site, you can create a
relative link, which includes a path describing how to get from the cur-
rent page to the linked page. A relative link doesn't need to include the
domain name of the site — just the instructions for a browser to move
from one page within your site to another. (If you want to link to a page
outside your site, see the next section, "Linking to Another Web Site.")
When you link from one page to another page in your Web site, the
most important thing to remember is to save your pages in your site's
root folder (as described in "Defining a Web Site in Dreamweaver," ear-
lier in this chapter) before you start setting links. Here's how to create a
link from one page to another within a Web site:
Pet Boarding Services
At Pamela's Pet Services, we pamper your pets, whether yo
afternoon or for an extended vacation.
Our trained staff delight in playing with your pets and will r
only well fed, but that they get plenty of excercise and pla\
E3_earn more about our boarding services
Pamper Your Pet with Our Grooming
We offer a luxury bath and trim service, with emphasis on \
I your pet.
7. In Dreamweaver, open the page where you want to
create a link. Select the text or image that you want to
serve as the link (the text or image that a user clicks to
trigger the link). Click and drag to highlight text, or
click once to select an image. In this example, I select
the text Learn more about our boarding
services, and I want to link it to a page named
boarding . html located in a folder named services.
Note that all these files and folders are located inside
the local root folder that I defined for this site in
Dreamweaver.
INSERT
Common ▼
% Hyperlink
Email Link
1^1 Named Anchor
b □
Horizontal Rule
Table
Insert Div Tag
£1 t Images : Image
Jfe* - Media : FLV
Date
2. To set the link, click the Link icon on
the Common Insert panel to open the
Hyperlink dialog box. (Alternatively,
you can choose InsertOHyperlink.)
Chapter 6: Getting Started with Dreamweaver 7 7 7
3.
In the Hyperlink dialog box, click the Browse
icon (the yellow file folder) to the right of the
k field. In-the Select File dialog box that
/TTkwaj^pn your hard drive to the
lUadhV^Jwant to link your image or
text. Click to select the filename of the page, and
then click OK (in Windows) or Choose (on a
Mac). The rest of the settings in this dialog box
are optional. (See sidebar on "Targeting how
links open".)
Hyperlink
Text: Learn more about our boarding se
Link: services/boarding. html|
Target: ^
Title:
Access key:
Tab index:
OK
2
Cancel
Help
Pet Boarding Services
At Pamela's Pet Services, we pamper your
afternoon or for an extended vacation.
Our trained staff delight in playing with yo
only well fed, but that they get plenty of e
Learn more about our boarding services l
Pamper Your Pet with Our
We offer a luxury bath and trim service, wi
your pet.
4- The link is automatically set, and the dialog
box closes. If you create a link by using text,
as I do in this example, the text changes to
reflect the style for a link. By default, Active
links appear underlined and in dark blue. To
test your links, you must view the page in a
Web browser. Choose FileOPreview in
Browser and then choose any browser you
associated with Dreamweaver to preview the
page and test the link. For more detailed
instructions on previewing a page in a Web
browser, see Chapter 10.
If you haven't already saved your page, a message box opens, explaining that you can create a relative link only
after you save the page. Always save the page you're working on before you set links.
Targeting how) [inks open
When you create a link in Dreamweaver,
you can specify the Target options by
using the Target drop-down menu in the
Properties inspector, or by selecting a
Target option when you set the link in
the Hyperlink dialog. These are the target
options and their effect:
_blank: Opens the linked page in a new
browser window.
_parent: Opens the linked page in the
parent frameset or window that con-
tains the link.
_self: Opens the linked page into the
same frame or window as the link. This
is the default, so if you don't specify a
target, it should open in the same
window.
u* _top: Opens the linked page into a full
browser window, which removes any
frames if they are in use.
Part II: Putting the Pages Together
Linking to Another Web Site
i^- Stuff you v -
Need to Knou)
Toolbox:
Dreamweaver CS4
A Web site with a root
folder defined in
Dreamweaver
The address of the page
to which you want to link
Time needed:
Less than
15 minutes
Linking to a page on another Web site — called an external link — is
even easier than linking to an internal link. All you need is the URL of
the page to which you want to link, and you're most of the way there.
To create an external link, follow these steps:
We treat your loved ones like family."
Adopt a Pet
At Pamela's Pet Services, we care about all of the animals in our
community, that's why we contribute 10% of our profits to the local
animal shelter and encourage our customers to consider adoption.
To learn more about adopting pets anywhere in the U.S^
www. petfinder. com.
visit
Adopt a Pet
At Pamela's Pet Services, we care about all of the animals in our
community, that's why we contribute 10% of our profits to the local
animal shelter and encourage our customers to consider adoption.
To learn more about adopting pets anywhere in the U.S.
www. petfinder. com.
visit
Hdr> <div#container> <div#mainContent> <div#mainContent> <p> \ \ |<i"5 \ 100% v 1 762 x 360 v 85K / 13 sec Unicode (UTF-8)
Format
Paragraph ▼
Class
oneColFixQrHdr ▼ B I
■ —
■ —
■ —
ID
None ▼
Link
http://www.petfinder.com J
▼
Target
Page Properties.
List Item
7. In Dreamweaver, open the page
from which you want to link and
click to select an image, or click and
drag to highlight the text that you
want to act as a link. You can also
click to select any image on the
page to serve as the link. In this
example, I selected the text visit
www. petfinder . com. , at the
bottom of the page.
2. In the Link text box in the Property
Inspector, type the URL of the page you want
your text or image to link to, and then press
Enter (in Windows) or Return (on the Mac).
You can also copy and paste a URL from the
address bar in a Web browser, which is an
excellent way to ensure that you don't enter
the address incorrectly. You must always
use the full URL, including the http : / / part,
when you create an external link in HTML.
Otherwise, the browser can't find the correct
external site address.
3. The link is set automatically, and the text
changes to indicate that it's an active link.
To test a link to another Web site, you must
view your page in a browser and be con-
nected to the Internet. Choose FileOPreview
in Browser and then choose any browser
you've associated with Dreamweaver to pre-
view the page and test the link. For more
detailed instructions on previewing your
page in a browser, see Chapter 10.
Chapter 6: Getting Started with Dreamweaver J
Setting a Link to an E-Mait Address
vDaaI,^
Need to Know
Toolbox:
Dreamweaver CS4
w A Web site with a root
folder defined in
Dreamweaver
An e-mail address
Time needed:
Less than
15 minutes
Another common link option directs site visitors to an e-mail address.
Visitors can send you messages easily with e-mail links. I always recom-
mend that you invite visitors to contact you because they can point out
mistakes in your site and give you valuable feedback about how you can
further develop your site. Adding contact information also lends credi-
bility to a Web site because it shows that you're accessible and open to
being contacted.
Setting a link to an e-mail address is just as easy as setting a link to
another Web page. All you need to know is the e-mail address you
want to link to and which text or image you want to use when you set
the link.
7. To create an e-mail link, select the
text that you want to serve as
the link.
Pamper Your Pet
with Our Grooming Services
We offer luxury bath, trim, and other grooming services. Keeping
your pet healthy and safe is the most important part of any
groomming session.
Making your pet comfortable and happy is our top priority.
Dressing them in business suits is optional.
We also offer free pick up and delivery for your pet on certain
days! For more information or to schedule a pickup, email us at
info@pamelaspetservices.com
INSERT
Common ▼
\i. El iS> ^
2. With the text selected, click the Email Link icon on
the Common Insert panel. Alternatively, you can
choose InsertOEmail Link.
When visitors to your Web site click an e-mail link, the visitor's computer system automatically launches the
default e-mail program and creates a blank e-mail message to the specified e-mail address. This is a cool trick,
but it can be disconcerting to users who don't expect it to happen, and it doesn't work if they don't have an
e-mail program on their computer. That's why I always try to let users know when I use an e-mail link. For
example, rather than just link the words Contact Janine, I link the words Email Janine. Even better, I often link
the actual e-mail address.
Part II: Putting the Pages Together
3- In the Email Link dialog box that opens, enter
e-mail address in the E-Mail field and click
~ gp^Jj^b^closes and the text automati-
iVglatV^Sfc style for an active link.
Email Link
-€3-
Text: info@pamelaspetservices.com
E-Mail: info@pamelaspetservices.com
OK
Cancel
Help
i
Image, 42K
ID
W 233
H
Src timages/Dog-in-suit.jpg
401
Map V Space
K] DDW H5pace
Target
Original
Link rnailto: ! nfo@pamelaspet Edit
Border
© (£> Align
Dog in Suit ▼
Class fltrt T ®
ft if
Default ▼
4- The Email Link dialog box works only with text. If you want to use an image as
an e-mail link, you must select the image and then enter the e-mail address,
preceded by mail to : in the Link field in the Property Inspector. In this exam-
ple, the image is selected, and the e-mail link has been created by entering
mailto:info@pamelaspetservices.com.
When you create an e-mail link on a Web page to be displayed on the public Internet, you open yourself to
spammers, some of whom use automated programs to "lift" e-mail addresses off Web pages. That's why many
sites don't include e-mail links, but instead use text such as "Send e-mail to Janine at jcwarner dot-com." You
can also use a form to get around this potential problem. By setting up a form with a script that delivers the
form's contents to an e-mail address, you can shield your e-mail address from spammers while still making it
easy for visitors to your site to send comments. A relatively new alternative is offered by the Web site
AddressMunger.com, which you can use to create a special script that shields your e-mail address from spam-
mers. You can find more information in Chapter 1 5 about AddressMunger.com and other services that you can
use to enhance your Web site.
Chapter 6: Getting Started with Dreamweaver /
Changing Page-Wide Settings
D r 0 p©6 Properties
Stuff l/ou Need to
Know
Toolbox:
Dreamweaver CS4
A Web site with a root
folder defined in
Dreamweaver
Time needed:
Less than half
an hour
You can change many individual elements on a page in the Property
Inspector, but if you want to make changes that affect the entire page,
such as changing the background color of the entire page or changing
the way links and text are formatted, you can use the Page Properties
dialog box. Although you can apply global settings, such as text size
and color, in the Page Properties dialog box, you can override those set-
tings with other formatting options in specific instances. For example,
you can set all text to the Helvetica font in the page properties and then
change the font for an individual headline to Verdana via the Font field
in the Property Inspector. To change the font settings, background and
text colors, and link colors for an entire page, follow these steps:
Choose ModifyOPage Properties or click the
Page Properties button in the Property
Inspector to open the Page Properties dialog
box. Select the Appearance (CSS) category, click
the Page Font drop-down list, and choose the
font collection you want to serve as the main
font for the text on your page. (See the earlier
sidebar "Why so many fonts?" in Chapter 4.)
Page Properties
Category
Appearance (CSS)
Appearance (CSS
Appearance (HTML)
Links (CSS)
Headings (CSS)
Title/Encoding
Tracing Image
Page font:
Size:
Text color:
erdana, Arial, Helvetica, sans-serif
B /
Default Font
Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-seri
Background color: Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Background image: Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Repeat: Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif , New York, serif
Lucida Console, Monaco, monospace
Left margin: comic Sans MS, cursive
Garamond, Times New Roman, sans-serif
Top margin:
Edit Font List...
3
13
Help
OK
Cancel
Apply
'age Properties
Category Appearance (CSS)
IJ31
Appearance (CSS
Appearance (HTML)
Links (CSS)
Headings (CSS)
Title/Encoding
Tracing Image
Page font:
Size: 100
Text color: B #000000
Background color:
Background image:
Repeat:
" B 7
Left margin:
Top margin: 0
Help
OK
Cancel
Apply
2. In the Size drop-down list, specify the font size
you want for the text on your page. (In this
example, I selected 100%, but you can choose
from a variety of size settings.) Click the Text
Color swatch box to reveal the color palette.
Choose any color you want for the text color on
the page. The color you select fills the color
swatch box but doesn't change the text color on
the page until you click Apply or OK.
When you change the background, text, or link colors, make sure that the colors look good together and that
your text is still readable. As a general rule, go for high contrast pairings: light text is best displayed on a dark
background, and dark text is best displayed on a light background.
/ / V ' >art "■ P utt ' n 9 Pages Together
3.
Click the Background Color swatch box and
choose a color if you want to fill the background
of the page with a solid color. If you want to
rt^a grapllicjntp the background of your
lick the Browse button next
aargrouTirrYmage box, and in the Select
Image Source dialog box that appears, select
an image and click OK to return to the Page
Properties dialog box. When you insert a back-
ground image, it automatically repeats (or tiles)
across and down the page unless you choose the
no-repeat option from the Repeat drop-down list
or use CSS to further define the display.
Background image: images/background. jpg
Browse,
Repeat:
i h
repeat v<¥
Left margin:
repeat-x
repeat-y
Top margin:
0 [px ▼
Right margin: 0
Bottom margin: 0
0
px T
0
px ▼
4- Use the margin options at the bottom of the
dialog box to change the left, right, top, or
bottom margins of your page. Entering 0 in all
four fields removes the default margin settings,
which automatically add margin space at the top
and left side of a Web page, enabling you to
create designs whose edges begin flush with the
edge of a browser. Most professional designers
prefer to set the margins to 0 and then use other
CSS settings to control the positioning of the
design within a browser window.
Left margin: 0
Top margin: 0
pt L*
Right margin: 0
Help
Pt
in
cm
mm
PC
em
ex
Bottom margin: 0
0
px ▼
0
px ▼
OK
Cancel
Apply
Page Properties
Category
Appearance (C55)
Appearance (HTML'
Headings (C
Title/Encoding
Tracing Image
Links (C55)
5- To alter the display of links on a page, first select the
Links (CSS) category from the left side of the Page
Properties dialog box. Specify the font face and size you
want for the links on your page. If you don't specify a
font, links appear in the same font and size that are
specified for the text in your document.
Although you can vary the link styles to suit the design of your site, it's good practice to use the same link styles
throughout your site so that your visitors can easily identify links.
Chapter 6: Getting Started with Dreamweaver j j *J
6.
To the right of the Link Font drop-down list,
click the B or / icon if you want all links on your
page to appear in bold or italic, respectively,
cifv a col|>r for any link option (or all link
i^jYbj fc^s3g the color palette and select-
ai^lorfor eScri of the link states separately.
The color you select is applied to links on your
page based on the link state. All four link states
can be displayed in the same or different colors:
• Link Color: This option controls the
color in which a link appears when
it's first displayed on a page.
• Visited Links: This option controls
the color of links that a visitor has
already clicked, or visited.
• Rollover Links: A link changes to this
color when a user rolls the cursor
over the link (also known as hovering).
• Active Links: A link changes to this
color briefly while a user is actively
clicking it.
J age Properties
Category Links (CSS)
Appearance (CSS)
Appearance (HTML)
Links (CSS
Headings (CSS)
Title/Encoding
Tracing Image
px
Link font: (Same as page font)
Size:
Link color:
Visited links: [~^|
"HI
Underline style: Always underline
Rollover links: 1^
8FC0 0 0 I ►
Active links; , . ■ , i i ■ 1 ■
[I I
Help
OK
Cancel
Apply
7- In the Underline Style drop-down list, specify
whether you want links underlined. By default,
all links on a Web page appear underlined in a
browser, but many designers find the underline
distracting and prefer to turn it off by selecting
Never Underline. You can also choose Show
Underline Only on Rollover to make the under-
line appear when a user moves a cursor over a
link. Hide Underline on Rollover causes the
underline to disappear when a user moves a
cursor over a link.
Always underline
Always underline
Never underline
■
5how underline only on rollover
Hide underline on rollover
Page Properties
Category
Links (CSS)
Appearance (CSS)
Appearance (HTML)
Links (CSS
Headings (CSS)
Title/Encoding
Tracing Image
Link font: (Same as page font)
▼ B I
Size:
px
Link color:
Visited links:
#009
#333
Rollover links: O #FC3
Active links: #FC3
Underline style: Never underline
Help
OK
Cancel
ply
8. As you alter the different settings, you can
click the Apply button to see how the
changes appear on your page. After you
specify all the settings, click OK to finish and
close the Page Properties dialog box.
Part II: Putting the Pages Together
Defining New) Styles in DreamWeaver
stuft you
Need to Knou)
Toolbox:
\* Adobe Dreamweaver CS4
A page or Web site you
where you want to add a
new style
Time needed:
About 15 minutes
Whether you create a new, blank page in Dreamweaver or start with
one of the Dreamweaver CSS layouts, as described in an earlier task in
this chapter, you can create your own styles to format text, images, and
other elements in your pages.
As you move through the steps to create a new style in Dreamweaver,
you might be surprised by the number of options in the numerous
panels and dialog boxes available for creating CSS. As you explore the
possibilities, remember that you can leave attributes unspecified if you
don't want to use them and that you can always go back and edit styles
after you create them.
To define a new style, either create a new document or open an existing
Web page in Dreamweaver and follow these steps:
/. Choose FormatOCSS StylesONew.
Format | Commands Site Window Help
Indent
Outdent
Paragraph Format
Align
List
Font
Style
CSS Styles
Color...
Ctrl + Alt +]
Ctrl + Alt +[
ces, we offer a wide range o
s\web sites 1 -OWam
nBHEBlHSHBI
ela's Pet Se
!rvices\services\special htn
a's Pet Services
II 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
None
fltlft
fltrt
V oneColFixCtrHdr
New...
Attach Style Sheet...
Convert Inline CSS to Rule.,.
Move CSS Pules...
Design-time...
es
ig across town or across the
ensure you pets arrive safely.
f
4
New CSS Rule
Selector Type:
Choose a contextual selector type for your CSS rule.
Class (can apply to any HTML element)
Selector Name:
Choose or enter a name for your selector.
.imagecaptionT
This selector name will apply your rule to
all HTML elements with class "imagecaption"
In the New CSS Rule dialog box, choose the type
of CSS selector you want to create from the
Selector Type drop-down menu. (If you need a
refresher on the four selector options and choos-
ing selector types, see Chapter 4.) In this exam-
ple, I'm creating a class style that I will use to
format the captions for my images. In the
Selector Name field, type a name. Because
class styles must begin with a period (.),
I named this style . imagecaption.
Chapter 6: Getting Started with Dreamweaver / / ^
3.
In the Rule Definition area at the bottom of the New CSS
Rule dialog box, select where you want to define your
new style. Choose This Document Only from the drop-
nmenu |oj:reate an internal style sheet. In this
*ng my new style to an external style
eerrnar^s aireaTty attached to my page (design .ess).
To create an external style sheet, click to select the
name of the style sheet, or choose New Style Sheet File
to create a new style sheet file as you create the style. If
you choose to create a new style sheet, enter a name in
the Save Style Sheet File As dialog box and then click
Save to continue. Usually, you want to add a style to an
external style sheet; see Chapter 4 for details about
internal versus external style sheets.
Rule Definition:
Choose where your rule will be defined.
design, ess
(This document only)
| (New Style Sheet File)
design, ess
5
CSS Rule Definition for .oneColFixCtrHdr in design. ess
Category
B53
Background
Block
Box
Border
List
Positioning
Extensions
Type
px
Text-decoration: Q underline
| overline
Z! line-through
blink
O none
Help
normal
Font- variant:
bolder
Text-transform: lighter
100
Color: \~ w \ 200
' 300
400
500
600
700
800
900
OK
Cancel
E3
Font-family: Georgiaj Times New Roman, Times, serif
Font-size: small ▼ px Font- weight: 55151
Font-style: ▼
Line-height:
Apply
4- In the CSS Rule Definition dialog box, choose a
category on the left. For this example, I chose
the Type category to specify font options for
this style because I want the font to be different
from the main page font. As you can see in this
figure, I chose the Georgia, Times New Roman,
Times, serif font collection; set the Font size to
Small; and set the Font weight to Bold. (See
Chapter 4 for more information about font col-
lections.) Click OK to save the style and close
the dialog box.
Part II: Putting the Pages Together
DropBooks
5. The new style appears at the bottom of the
CSS Styles panel. You can change the order
of styles by clicking to select a style name
and dragging it to another position in the
panel.
CSS STYLES
AP ELEMENTS
All
Current
All Rules
□ design.css
— body
— /container
— #header
— #rnainContent
— #mainContent2
— #footer
— #footer p
— #navbar
— #navbar ul
— #navbar li
— #navbar a
=hl
-h2
-h3
-.fltrt
— .fltlft
I — .imaqecaption
■ft
J
Properties for ".im-agecaption 1
font-size small
line-height 110%
Add Property
1= A zi M
>ffer a wide range of pet services,
ces
; across town or across the
isure you pets arrive safely.
service fl^
id rely <
fltrt
> 3f
r
image caption
oneColFixCtrHdr
Hdr#phot. Rename...
■ Attach Style Sheet...
et Relocation Services: We'll)
more your pet so gentl y, they'll
leep all the wav there.
^ ^ 100% v 762 x 447 v 152K/22sec Unicode (UTF
Class image caption
Link
B I :E l ,= ts ts Title
6. To apply a new class style, like the one I cre-
ated in this task, select a section of text in a
Web page and then use the Class drop-down
list to select and apply the style. For more
information on how to apply other kinds of
styles, see Chapter 4.
Chapter 6: Getting Started with Dreamweaver
Creating and Using Templates
\J — $iaf\ jlou ^
Need to Know
Toolbox:
v 0 Adobe Dreamweaver CS4
j> A page design you want
to turn into a template
Time needed:
Less than an hour
After all the time you spend creating a page design in Dreamweaver,
you might be pleased to know about templates. When you save a file as
a Dreamweaver Web Template, it becomes available from the New File
dialog box, which makes it easy to use to create new pages quickly. But
the greatest time-saving benefit of Dreamweaver's Web Templates
becomes evident when you want to make changes to a design after you
use it to create numerous pages because you can use templates to
make global updates across many pages at once.
Most of the templates included with this book use the Dreamweaver
Web Template features. Reading through this task not only shows you
how to create your own templates but also helps you better understand
how to use and edit the templates that you can download to use with this
book. To find the templates, just go to www. DigitalFamily . com/diy.
In this task, you learn how to save any page as a template, use the tem-
plate to create new pages, and then edit the template to make global
updates to those pages.
7. To create a new template, choose FileONew.
In the New Document dialog box that
appears, choose Blank Template and then
choose the Type and Layout just as you
would to create a new page. (See the
"Creating New Pages in Dreamweaver" task
earlier in this chapter.) You also can turn
any existing page in Dreamweaver into a
template by using the Save As Template
option. In this task, I build on a page from an
earlier task by turning it into a template. To
do so, open any Web page in Dreamweaver
and choose FileOSave As Template.
Dw ■* A"
File Edit View Insert Modify Format Commands Site Window Help
New...
Open...
Browse in Bridge...
Open Recent
Open in Frame...
Close
Close All
Ctrl+N
Ctrl+O
Ctrl + Alt +0
►
Ctrl+Shift+O
Ctrl+W
Ctrl+Shift+W
Share My Screen...
Save
Save As...
"sauo All
Ctrl+S
Ctrl+Shift+S
Save to Remote Server...
Save as Template.,.
Revert
Print Code...
Ctrl+P
Import ►
Export ►
Convert ►
Preview in Browser ►
Check Page ►
Validate ►
Compare with Remote
—
Jsers\Ai
a PC)Documents\web sites
Title:
Title: Pamela's Pet Service
Inn
500
1 1 1 1 1 1 1 i i
550
1 1 ; 1 1
600
1 1 1 1 1 1 1
650 ,
1 1 1 1 1 1 1
2d ones like family."
Part II: Putting the Pages Together
2.
In the Save As Template dialog box, make sure
that the site you're working on is displayed in
the Site field. (This should happen automatically
uxoniDl^teil the site definition process; if
ure to do so by following the
steps m trie ffrsTT?f§k in this chapter.) You can
name the template anything you like as long as
you don 't use spaces or punctuation. When you're
prompted by the Update Links dialog box,
choose Yes to preserve any links to pages or
images in the file.
Save As Template
m
Site:
Existing templates:
Pamela's Pet Services
(no templates)
Description:
Save as: services
Save
Cancel
Help
HIES
ASSETS
Oj Pamela's Pet Servi ^
Local view ▼
i m
Local Files
Size
□ Site - Pamela's Pet Serv. . . Fol
index.html 5KB Fin
- ( , design, ess 4KB CS
□••••£3 Templates Fol
services ,dwt
El -lSl services
E]-(5) images
Fol
Fol
3.
When you create a Web Template, Dreamweaver auto-
matically adds the . dwt extension. In this case, my file
is named services . dwt. As you can see in the Files
panel shown in this figure, Dreamweaver automatically
stores the new template in a folder named Templates. If
you don't already have a Templates folder in your local
root folder, Dreamweaver creates one for you when you
save your first template. If Dreamweaver prompts you
to update links as you save the page as a template,
click Yes.
Although the Dreamweaver layouts are designed to display CSS and other formatting options according to con-
temporary standards, not all Web browsers support CSS the same way, so it's always wise to test your designs
in a variety of Web browsers before you publish them. And here's a tip: Internet Explorer and Safari do not dis-
play Dreamweaver Web Templates, but Firefox does. Thus, if you're working on a template and want to preview
your work as you go along, choose FileOPreview in Browser and then choose Firefox from the list of browsers.
(You find more detailed instructions in Chapter 10 for previewing your pages in multiple Web browsers and for
adding new browsers to the preview list in Dreamweaver.)
Chapter 6: Getting Started with Dreamweaver J 23
Dw
m " & '
A »
JANINE S FAVORITE ▼ f£
-, - 3 x
File
Edit View
Insert Modify Format Commands Site Window Help
services .dwt x
1 ;
0 -
0 "
2 -
0 -
2 -
5 -
0^
3 -
0 -
i -
5 -
D -
We treat your loved ones like family.
ii
\
1
Special Services
At Pamela's Pet Services, we offer a wide range of pet services,
including:
Pet Relcoation Services
Whether you're moving across town or across the
country, we can help ensure you pets arrive safely.
-yjs t\j -1 r> rx _ 1 •
<body.oneColFixCtrHdr> <div#container> |<div#mainContent;
PROPERTIES
Div IC
100% v 762 x 447 v 152K / 22 sec Unicode (UTF-8)
Class None
mainCont* ▼
I
1 <div id="mainContent">
Edit CSS — I -
®
INSERT
Common ▼ ^S, -^T i& — '
111- 0 . fj Q (£}
ess sty i es HrEiEMtrns
All Current
All Rules
B design. ess
—body
— #container
— #header
— #mainContent
— #mainContent2
— #footer
— #footer p
— #navbar
— #navbar ul
— #navbar li
— #navbar a
-hi
-h2
-h3
Properties for "ttmainContent"
background #FFFFI
padding 0 20px
Add Property
:i= » e y m
HIES
Q Pamela's Pet Servi ▼ Local view r
Local Files
Size
El £jl Site - Pamela's Pet Serv.
index.html
design, ess
EE Templates
ES Si services
E9 liz il images
< I iri
2KB
4KB
Before you use your template to create new pages, you need to create editable regions
in the template: areas of the template that can be edited in new pages created from the
template. You create editable regions where you want to be able to add unique content
to a new page created from the template, such as the photos and stories you will want
to use in the main part of each page. To create an editable region, first select a con-
tainer, such as the mainContent div, that contains the text and image in the middle
of this page. To select the mainContent div, I place my cursor in the content and
then clicked the mainContent tag in the tag selector at the bottom of the page.
Any area that's not an editable region can only be edited in the template itself, and any edits you make to a part
of the page that isn't designated as editable will automatically be updated on all the pages created from the
page. For example, I wouldn't make the banner at the top of this page an editable region because I want to use
the same banner at the top of every page in this site.
Part II: Putting the Pages Together
DropBooks
5. With a container selected, such as the
mainContent div, choose InsertOTemplate
ObjectsOEditable Region.
Insert Modify Format Commands Site Window Help
Hyperlink
Email Link
Named Anchor
Date
Server-Side Include
Comment
HTML
Template Objects
Recent Snippets
Spry
InContext Editing
Data Objects
Customize Favorites.
Get More Objects...
Tag...
Ctrl+E
Image
Ctrl+Alt+I
Image Objects
►
Media
►
Table
Ctrl+Alt+T
Table Objects
►
Layout Objects
►
Form
►
5 C\Documents\web sites 1 -09\Pamela':
Title: Pamela's Pet Services
your loved ones
Ctrl+Alt+A
Fpet services,
I ■
Make Template
Make Nested Template
Editable Region
Optional Region
Repeating Region
Editable Optional Region
Repeating Table
r
New Editable Region
i I
Name: Main
This region will be editable in
based on this template.
documents
Cancel
Help
6. In the New Editable Region dialog box that opens, give the
region a name (no spaces or special characters!), and then
click OK. I enter the name Main in this example. If you
don't have visual aids turned off, Dreamweaver will distin-
guish the editable region by surrounding it with a blue line
and including a small tab at the top with the name you
gave the region. Repeat Steps 4, 5, and 6, selecting differ-
ent containers in turn to create additional editable regions.
7. After you define all editable regions, choose
FileOSave to save the template. When you're
ready to create a new page from the template,
choose FileONew, just as you would do to
create any new page in Dreamweaver. In the
New Document dialog box, choose Page from
Template from the left-hand column, choose the
site you're working on from the middle column,
and then choose the template you want from
the right column. Notice that Dreamweaver
includes a preview of the template at the far
right side of the dialog box.
Nmu On cum an I
■■
P-sfl* kon TtmpWt
Page ten jjtpfc
^0 aim
lsr^dba ra- Si ThJi'i Pit Eirun
,±, CJtmt Uh*V* Hid
jZ_ 0m i>;!iiY:ti.ii:.
si. Dwfcl LtfoflbrtiE
QX* "ifc L-09
ii, Enid-inert jJ Nustal'
ill FJcwiDwr
FtadtiFjas
i FtrkVats
IdlHTll lirttM?
3-i *<■. ■
HaloeiVoiiGjciJ.Ean
at,
ii,
&
ii, Pifiiii, fst 5sfvi«
ci. Rm rijilrr. firm
P**nU' t pa U
PrxT>fW | ■HTM 1 JQ Trnlvd
j LpdxB p^e pftiri liiTfJ Ltunqsf
O N to |\| I Ctrol 1
Chapter 6: Getting Started with Dreamweaver J %5
ays save-a new page before you
rj^dyflT^glyb^hoosing
■^ft^^iIsXaS^ou would save
any other new file in Dreamweaver.
You can then edit any of the edit-
able regions in a page created from
a template, adding images and text
to the editable regions, such as
this cat photo and text. Remember,
however, that you can't alter any of
the areas that aren't editable, such
as the banner image at the top of
the page, which can only be
changed in the template.
Mb Bit ife* lrr.<rt Miity Farm* Cc
If:
, 1K I* H» ff- f r: ft ' IS?. I'*! I :
"We treat your loved ones like family.
» * - ±
J != □ if - *> - <» & q
We ear* about your pets
At Pamela's Pet Services we care about your pets, j
mommis I
Class ouaColPI...
V,
t.i/t".*.nt^>
g o i a ft > •« i p
-* tVtei.NlK »BFt.
a O iwvcn Fol
■■ 1-
HI
B I Deal terns jelrcw lata
Enter text here. Enter text here. Enter text here. Enter
text here. Enter text here. Enter text here.
Enter Third headline
Enter text here. Enter text here. Enter text here. Enter
text here. Enter text here. Enter text here.
Photo (250 x 300)
jAdd Cajption Here
Copyright aoig All rights reserved. Pamela's Pet Services.
9. At any time, you can go back to the
template to make changes to any
area of the template that isn't an edit-
able region, and those changes will
automatically be applied to any
pages created from the template. In
this example, I included copyright
information in the footer of the page.
Because it's not an editable region, I
can now change the year from 2009
to 2010, and the footer will automati-
cally be updated on every page in
the site created from the template.
10. To save your changes and update any pages
created from the template at the same time,
choose FileOSave. In the Update Template Files
dialog box, click Update. Dreamweaver lists all
pages created from the template in this dialog
box so that you can see exactly which pages
will change. If you don't want to apply the
changes to your pages, choose Don't Update.
All new pages created from the template will
include the changes you made.
Update Template Files
Update all files based on this template?
services\care.html
services\pets.html
Update
Don't Update
Part II: Putting the Pages Together
Adding Meta Tags for Search Engines
stuft you
Need to Knou)
Toolbox:
Dreamweaver CS4
A Web site with a root
folder defined in
Dreamweaver
Time needed:
Less than half
an hour
If you've heard of meta tags, you probably correctly associate them
with search engines. Although meta tags are used for a variety of pur-
poses, the most common is to provide special text that doesn't appear
in the body of your page but is read by crawlers, bots, and other pro-
grams that scour the Web, reading the code behind Web pages and cat-
aloging and ranking those pages for Bing, Google, and a long list of
other search-related sites.
Some search engines read meta tags for keywords and descriptions.
The keyword meta tag enables site designers to specify a list of key-
words that match the content on their Web sites when someone types
the same keywords into a search engine. The meta description tag is
designed to let you include a written description of your Web site, and
search engines often display its content as the brief description that
appears in search results pages, so including a meta description in all
your pages is definitely worthwhile. Follow these steps to fill in the
meta description tag:
7. Open the page where you want to add a meta
description. You can use meta descriptions on
any page, or all pages, on your Web site.
Choose InsertOHTMLOHead TagsODescription.
In the Description text box, enter the text you
want for your page description. (Don't add any
HTML code in this box). When you click OK, the
meta description is automatically added to the
HTML code behind the page.
Description
Description:
Pamela's Pet Services provides
boarding, grooming, relocation, and
other services for dogs, cats, and
OK
Cancel
Help
-n
:l — 'TemplaxeBeginEdiEatiLe 'name= n heacr - — >I
:L — -TennplateEndEdi tabic >I
<ineta ■ name =11 De sc r lpt io n 71 , contiiit="£iurcla 1 3 'Pet 1 Services ■
provides 'bo erding , "grooming, 'relocation, ■ and "other "secvices
f or -dog a r -cats , -and otha c pets . 11 -/ >5 T
</head>91 1
h fv! 1 1 1 1 1 1 1 K'vi l!.V Fly! fvv! i i 1 1 1 1 ["ff! \v,\ fry! Hv! f?'''l I^v! Eiv! Try] i
"We treat your loved ones like f amity."
2. To view or edit the Meta description after you
create it, choose either the Split or Code view
option by clicking the corresponding button at
the top of the workspace. In this example, I
selected Split so that both Code view and
Design view are visible. To edit the meta
description, locate it in the HTML code, and
then you can delete, change, or add text as you
would in Design view. The description text you
enter is inserted into the Head area at the top of
the page in the HTML code. Meta content
doesn't appear in the body of the page.
If you want to add keywords, repeat Steps 1 and 2 and choose InsertOHTMLOHead TagsOKeywords in Step 1
Chapter 6: Getting Started with Dreamweaver
Inserting Code into a Web Page in DreamWeaver
1** — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Dreamweaver
CS4
A Web browser, such as
Internet Explorer or
Firefox
A snippet of code from a
site like Google
A Web page where you
want to add the code
Time needed:
About half
an hour
Many of the services featured in this book, including Google AdSense,
PayPal Buttons, and Google Analytics, require that you add a snippet of
HTML code or JavaScript to your Web pages.
In many cases, you need to add the same code to one or more pages in
a site. In the example featured in this task, I'm adding the code needed
for Google Analytics, which measures traffic to a Web site and needs to
be included at the bottom of every page on a site. In this case, the most
efficient way to add the code is to insert it into the template page.
Adding code to a template will add the code to every page created from
the template simultaneously.
When you open Dreamweaver to add your code, leave your Web
browser open so that it displays the page where you copied the code,
in case you want to make changes or need to copy the code again. You
can easily switch between two programs on your computer by pressing
Alt+Tab (Windows) or §§+Tab (Mac).
7. The easiest way to add code to a page
in Dreamweaver is click the Split View
button in the upper-left corner of
the workspace to display the code
behind the page in the top part of the
workspace. The advantage of using
Split view is that you can see Design
and Code views at the same time.
Here's a tip: When you're working
on code that adds a visible element
to your page, click any element in
Design view, such as the Copyright
information in the footer at the bottom
of this page, and Dreamweaver auto-
matically highlights the correspond-
ing code so that you can find your
place more easily.
services .dwt* x care.html* x pets.html* x
design, ess
Source Code
,t\ Code Split J] Design J*J Live View
Title: Pamela's Pet Services ^ ^ ^ QJv O*',
39 • -<div • id=" footer">1
40 B ■ • ■ -<p>|
Services . </p>1
41 ■■•■<! — -end -#footer • — >1
42 ■ -</div>1
43 ••<!-- -end -#container — ></div>"3I
44 </body>1
*| 45 </html>!
46 1
Pamela' s • Pet
3
0 — 150 ' 1100 , pO - ) I200 - ' I250 - ' |30T~ [3S0 - ; [400~~ |450~~ [500^ |SS0~~ pO" I&S0
text here. Enter text here. Enter text here.
Enter Third headline
Enter text here. Enter text here. Enter text here. Enter
text here. Enter text here. Enter text here.
700 , 7'
1 1 1 1 1 1 1 1 1 1 1 1
|Add Caption Here
opyrieht 2010. All rights reserved
Ik-
Pamela's Pet Services.
i 3 * ' "'
<body.oneColFixCtrHdr> <div#container> <div#footer> <p>
k \f) ^ 1 100% v|762x238v 84K/12sec Unicode (UTF-8)
One of the most confusing aspects of adding code to your site is that sometimes you see it in the design and
other times you don't. For example, when you add Google Analytics code to a page in Dreamweaver, no visible
change takes place on the page in Design view because the analytics code is only used to measure traffic to the
page with nothing visible to your visitors. However, some kinds of code, such as Google AdSense which displays
ads in a Web page, can be viewed, but only when you preview a page in a Web browser. Another point that trips
up new Web designers is that, for the code to take effect, you'll need to upload the page to a Web server so that
Google can find the AdSense code and begin tracking your traffic. You find instructions for publishing your pages
in Dreamweaver and more about how to use Google Analytics in Chapter 1 0.
y 2$ Part II: Putting the Pages Together
DropBooks
<script ■ type=" text/ j avascript">
var -gaJsHost ■= ■ ( ("https : 11 ■== - document .location, protocol)
■ : ■"http://www. ") ;
(une scape ("%3Cscript ■5rc= M1 ■ + -gaJsHost ■+ ■
ics . corn/ ga . j s T ■
type= T text/ j avascript T %3E%3C/ script %3E 11 ) ) ;
</ script>
<script ■ type = " text/ j avascript">
try ■ {
var -pageTr acker ■= -_gat ._get Tracker ( 11 UA- 10 602 15 0-1 11 ) ;
pageTracker ._t rackPageview () ;
} catch (err) ■ { }</ script>
</body>1
</html>1
1
Find the exact place where you want to add
the code. Google Analytics should be added
just above the </body> tag at the very end of
a page. Click to place the cursor in the code;
then choose EditOPaste to insert the code
you copied from a Web site (like Google
Analytics) into your page. Notice that the
Google code is surrounded by < scrip t> and
</script> tags. If you ever want to delete or
replace this code, make sure when you select
the code that you include everything between
and including the <script> tags.
The code you copy from a site like Google may include a script or other code that isn't in basic HTML This issue
shouldn't matter as long as you copy the code exactly as Google (or any other Web site) instructs you to and you
paste all the code into the HTML in your Web page. For example, if the code begins with a <script> tag, it
should include a closing </script> tag.
Chapter 7
DropB(®fMg a Profile or Portfolio Site
4
Tasks Performed in
This Chapter
Designing a winning
online profile
v 0 Creating a multipage
portfolio site
Customizing the portfolio
banner graphic
i> Customizing the portfolio
home page
^ Adding new template
pages
Introduce yourself to the world with a profile or portfolio site.
A Web site about yourself is a powerful tool that can help you
land your dream job, attract high-profile clients, or even reconnect
with long-lost friends and family.
Perhaps the biggest challenge to creating a profile or portfolio site
is determining the best way to summarize your life experience, tal-
ents, and body of work:
^ If you're an artist, you can photograph your paintings or
sculptures to create a visual portfolio of your work to display
online.
If you're a consultant, you can develop a collection of case
studies describing your success with previous clients or fea-
turing your best designs.
^ If you're a writer, you can include a collection of published
articles or showcase writing that hasn't been published
anywhere else — after all, a Web site enables you to become
your own publisher.
No matter what you do, you probably want to create a biography about yourself.
Whether your bio is serious or silly, trying to sum up your own life in a few para-
graphs is likely to be one of the most challenging things you will ever write (which
is why I include a few tips for writing a great biography in the sidebar "Telling your
own tale.")
In this chapter, you also discover the basics of bringing your ideas to life on the
Web. Working in Photoshop and Dreamweaver, you can transform the templates
featured in this chapter into a Web site that best showcases your work. If you
start working in this chapter and realize you still have a lot of work ahead of you
to gather all the images, text, and other elements you need for your site, consider
jumping to Chapter 2 and using the content check list and other resources to help
you with the planning process.
y ^0 Part II: Putting the Pages Together
Starting With Profile or Portfolio Templates
Thejinstructions in this chapter are designed to be used with the templates and
I 1 }T\ f\ (©>vided on the Web site for this book (www. DigitalFamily . com/diy).
I VmJc1h>moose a profile template or a portfolio template, depending on the type
of site you want to create. To download a template, just check the Web site for
this chapter number and template name listed in the Toolbox and then follow the
simple instructions on the site to download the files. The step-by-step instructions
in this chapter explain how to edit the template images as well as change colors,
fonts, and other style options in the Web page templates.
If you're new to working with Dreamweaver, you might want to first read Chapter 6
to become familiar with the basics of working with Dreamweaver before you dive
into creating a site with a template. If you know a little bit about Web design and
you're ready to customize one of the templates featured in this chapter, you find
everything you need in the following pages.
Introducing the profile template
If you want to showcase your personal or professional experience, the profile tem-
plate is designed to make it easy to create a simple Web site that features your
biography and samples of your work or hobbies in one quick and easy-to-design
Web page. The first task in this chapter is the simplest of the template designs in
this book. However, you can still alter the design as much or as little as you like,
and you can always add more pages.
If you want to create a profile site with multiple pages, you can save copies of the
page design and create links to as many pages as you need. If you know that you
want to create a site with multiple sections, you may want to use the portfolio site
template featured in the second half of this chapter because it's already set up for
a multiple page design, with a portfolio section that already includes a collection of
linked pages. (See the next section for an introduction to the portfolio template.)
These are the templates and the main pages you get when you download the Profile
template folder from www. DigitalFamily . com/diy:
index . html is for the main Web page.
W banner- graphic . jpg is for the graphic banner that appears at the top of the
I page.
Figure 7-1 shows an example of a design created using the first template featured in
this chapter. In the section "Designing a Winning Online Profile," you find instruc-
tions for customizing the profile template text, banners, and other features. The
site shown on the right, the freelance writer profile featured in this chapter, is an
example of how you can customize the profile template.
Chapter 7: Creating a Profile or Portfolio Site / 3 /
DropBo
fh Ua SW IHf WtV ';«•* SO <Mn Ml)
rofile
!».«.. ,K< > :m.
Headline Text
Oat mm
• » / l: a « nk
B^fer #■ L-te tea Wi fin fcactf"**? l^rm f*n 44x at
ir* : [.-< xrt itf-txxut -U i»i 1 aut»>l f etx ■ r J
W'<i »t fciait i^v.u aUfs. TTt an *i run cp* toarjj
ttwt**t<i kaWa fat a 4*w « « •« •«■>*** 'Xtm**.
[ >«• tttr tvir -iik* m itytd ra tfcat t>vc4«4*r cm cAn
t4c*i*r« iu it cdf i dEn dtMut nil ibt>l4 *< Itbirn
Headline Taut
AM tut anxfcn. wfci ■{ j«» vrak. tntswcaab. etc
Jenny Hontz
r^iiiuAai Mi t , ium
".. H..<
4«^<mu, ffl««A lm MM A>. > 3K*
• 7 ^uu : u 7- .-V» ait*
Aral. £tmL4^aa i»i Mm Arte/ Ba
t:ro • tr*n rur~i ar^a* v*l n*»^rf%a^*
i-i^t-w i !•*« • • u!,ui .J tia«4
taatt^ ItMta, nalm, U**>\ betat ifet-r
fear*, ivji u i tiMiHii
a* ■ ■ aplw *•=», t xt ta a * ■ Vrcu
'ixttfttilu a)ii.ttfc -i *■> at-cas a
T ' ' * ' *'T 1 li mJ v C4 tW JAJfc)
,^.^..».^
Sample* a- jenny v AiuJc*
Do«c Privacy Exist?
■MBMMMatr (Ml *t)a M
Wnij It *4t 4 frivly 4« vvriaV
m*«»mI~vii mm. Ami m't »•
t*» it ahsM
) * * ■ 1 1 .5 1- tr vriiaj 1 # hr
t jr?«*sr trcta tp-nau Unr V crt, va ttr*« awiu ana trrc tat *«i
*» itfl iffta; vtott I* |« in irm)(i«* i ntf* «iV«raj^ kuMf ar
|a>««ar can «f »n*«Mr-*M4>f ir-'*i »*! cv ^ i
1^ Gosp«l of Luke
>y Irwtr K-arr
>UOr*t»i iftfrttt
jtt an* b»«4» ft.« Mr? kit
•a Naa ibwiat and fa*4 «al
liu 1 laaaa am
Figure 7-1 : You can create your own personalized version of the profile site by altering the colors,
headlines, and text in this template.
Creating a muhipaqe portfolio site
If you're an artist, a photographer, a graphic designer, or another creative pro-
fessional, the portfolio site is for you! This template is designed to showcase a
portfolio with an image gallery, and thus includes six main pages: one for the front
page (shown in Figure 7-2), a second for an About page (which can also be used
for a biography), and finally, four pages (one each) for the four galleries. The links
among the main pages have already been created in the template files, making it
easy to develop your own multipage site, like the one shown in the Figure 7-2.
:C.1J«lllTin . 2^
™.r„ T r»ii:'i
<;,l mi.>:
rnl (I'M i*+
MOW EMLLBCn 4ULUH1H BIO 'J tOl"CI < 'Mf JT.-.'IT
t» fea> >t>»r *. o>» amn io.
B«» •-«' • RAM Mint f
JASPER JOHAl
kiwi fASHIIX
INU1A B
H Y
I»cr IM-r» a»i I
Figure 7-2: The Portfolio template is designed to showcase multiple image galleries, such as the
collections of photographs in this example.
If you're a photographer with hundreds or thousands of photos that you want to
share online, you might be better served by one of the many photo-sharing sites
on the Web (such as Flickr) or a professional photography site (such as Advanced
Photo Websites at www . i f p3 . com). You find a list of photo sites in the nearby side-
bar, "Many ways to share your photos."
P art " : Putting the Pages Together
Because the portfolio site is more complex than the profile site featured in the first
part of this chapter, you find three separate tasks designed to help you fully cus-
tomize this site:
Ff \ 1T\ f\ A'VLFriQrst task, in the section "Customizing Banner Graphics," shows you
I ImJ \J \J IhB^rfo edit the banner graphic (the image that appears at the top of this
page design) using Photoshop Elements. However, you can edit the graph-
ics included with the template files in any image editor that supports Layers,
including Adobe Photoshop. (Note: If you prefer to use text for the banner, you
can simply delete the placeholder graphic at the top of the page and enter text
in its place.)
W The second task, in the section "Customizing the Portfolio Home Page," shows
you how to use Dreamweaver to replace the text and images in these tem-
plates and how to make basic color and style changes.
The third task, in the section "Creating and Linking Pages using the Gallery
Templates," covers how to create new pages from Dynamic Web Templates in
Dreamweaver, set links to new pages, and use these templates to make global
changes across the pages you create.
To help you get started and to make it easy for you to build a complete site quickly,
I created five template pages for your portfolio site — one for each of the gallery
pages and another for the front and about page designs. You can use these tem-
plates to generate as many pages as you like for the site. Because these templates
use Dreamweaver's Dynamic Web Template features, however, you will find restric-
tions on what can be altered in pages generated from the templates because some
areas of the templates are locked, a feature that makes it possible to make global
changes across all pages created from a template. You find detailed instructions on
how to work with templates and locked regions in the tasks that follow.
To help you get started with this site and to ensure that the links on the naviga-
tion bars work properly, I created pages for each of the main sections from the
templates. You can easily add or delete pages, change the number of galleries, and
adjust the design to accommodate images of many different sizes.
These are the templates and the main pages you find in the site when you first
download the template folder from www. DigitalFamily . com/ diy:
index . html is the home page of the site, which was not created with a
template because it is a unique design. The home page is set up to display a
banner image at the top of the page, a large main image in the middle, and four
smaller images along the bottom, each linking to a different gallery.
W about . html is designed for a biography or other general information, but you
can use it (or save copies of it) to create any page with images and text. It was
created from the main . dwt template.
^ photol . html in the gallery 1 folder is for the first page of the first gallery
of the site and was created from the galleryl . dwt template. It's set up to
display a banner at the top of the page, a large main image, and eight smaller
images along the bottom.
\^ photol . html in the gallery2 folder is for the first page of the second gallery of
the site and was created from the gallery2 . dwt template. It's set up like the
first, but saved as a separate file so that you can alter each gallery independently.
Chapter 7: Creating a Profile or Portfolio Site J 33
photo 1 . html in the gallery3 folder is for the first page of the third gallery of
the site and was created from the gallery 3 . dwt template. Again set up like
the first, but saved as a separate file so that you can alter it independently.
DropBocte
a the hi
ol . html in the gallery4 folder is for the first page of the fourth gallery of
te and was created from the gallery 4 . dwt template. Again set up like
first, but saved as a separate file so that you can alter it independently.
Naming your files so that they correspond to their contents, as I have here, makes it
easier to identify the pages later when you want to edit them.
Many Ways to share your photos
You can find many excellent photo-sharing
Web sites on the Internet, including the
ones highlighted in this list:
Flickr: Flickr (www. f lickr . com) is one the
most sophisticated online photo sites, offer-
ing a wide range of services, including the
ability to manage lots and lots of pictures
in multiple personal albums. You also get
more advanced options for adding captions
and other text to your online album.
If you blog, you might appreciate the Flickr
features that make it easy to add photos to a
blog or online journal. You can even search
through photos from other Flickr users and
add their photos to your albums. (Sharing is
optional: You can keep your albums private
or make any or all of your images viewable
by anyone who uses the site.)
Photobucket: You can manage large num-
bers of photos at Photobucket (www. photo
bucket.com) and also upload and share
video. One feature that makes this site
extremely popular is the ease with which
you can add photos and videos that are
hosted at Photobucket to your blog or your
profile on sites like MySpace and Facebook.
Kodak EasyShare Gallery: The Kodak
Gallery site (www.kodakgallery.com) is
easy to use. You can upload photos you take
using any digital camera, phone, or film;
share your photos with friends, family, or
whomever; and print your favorite pictures
and shop for photo keepsakes and gifts,
such as magnets, mugs, and coasters. Folks
who look at your photos can sign a guest-
book so that you know they've been there.
Apple MobileMe: If you use an Apple
Macintosh computer, you won't find an
easier way to share photos than iPhoto and
MobileMe (www . apple . com/mobileme).
With iPhoto, you can create photocasts to
share any photo album with friends and
family. When you use this free service,
your photos are automatically uploaded
to MobileMe, and your friends and family
receive an e-mail message with a special
link. When they click the link, they automat-
ically receive your photocast. Best of all,
when you update your photos, your friends
and family receive updates automatically.
Shutterfly: Similar to Kodak EasyShare
Gallery, Shutterfly (www.shutterfly.com)
makes it easy to post and share photos
for free, offers simple photo-editing tools,
and sells printing services that you can
use to create a variety of gift items and
prints, including poster-size enlargements.
Shutterfly has an intuitive interface, and
you can use its specialized printing options
to turn your pictures into greeting cards,
bound photo albums, personalized calen-
dars, coffee mugs, T-shirts, and tote bags
that you can send to your friends and family.
IFP3 Advanced Photo Websites: If you're
a professional photographer and want to
create a Web site where you can sell photos
online, consider a site like www. ifp3 . com,
designed to make it easy to upload and dis-
play photos as well as manage online sales.
Part II: Putting the Pages Together
Customizing Banner Graphics
\J - Stuff you k -
Need to Knou)
Toolbox:
Photoshop Elements
The banner graphic from
the profile or portfolio
templates (from www.
DigitalFamily .
com/diy)
Your own text and
images to personalize
the template banner
Time needed:
About an hour
You can edit the banner graphics used at both the top of the portfolio
and profile templates by following the steps in this task. Change the
colors and add your own text and images to make these banner graph-
ics work best for your Web site. You can edit these graphics in any
image editor that supports Layers, including Adobe Photoshop and
Photoshop Elements, which is used in this task. The process is nearly
the same with either program in all the most recent versions. The pro-
file banner graphic, like all the other template images featured in this
book, is designed with Layers to make it easy for you to customize the
images, as you do in this task:
7.
Launch a graphics program, such as
Photoshop Elements (shown here), and
choose FileOOpen to open one of the tem-
plate banners.
Opr
I I
Nsae Dststektn T^gi
Rating
Krant Fiiin-,
i
My Profile
Art* ila-i ritajls
ft
1
Com [i tier
1*» FIB
My Profile
2.
ft afile-B-SAAtr Kf
narra:
FlAlP&B5Arl#l l|
Open ]
In this example, I'm opening the Profile-
Banner . tif template image file. (You find
this file in the images folder inside the
Profile template folder that you download
from the www. DigitalFamily. com/diy
Web site.)
Chapter 7: Creating a Profile or Portfolio Site J 33
3.
Open the Layers palette by choos-
ing WindowOLayers. The Layers
palette displays the five layers in
one for the back-
text Profile
ameTonlTfor tTie^maller text that
appears below the name, as well as
layers that contain the colored bar
and the bottom of the banner and
the colored box that appears at the
right. Because each section of text
is on a separate layer, you can edit
the text separately. For example,
you can change the color of the
words Prof ile Name without
changing the color of the other text
or affecting the background color.
4- To edit the text in any image
in Photoshop or Photoshop
Elements, first select the Type
tool in the Toolbox.
5. With the Type tool active, click and
drag to select a section of text and
then type to replace the words.
Adjust the Type tool settings on
the Options bar at the top of the
work area to change the color, font
face, size, or other options. In this
figure, I'm adjusting the font for the
selected text, which I changed to
read Jenny Hontz. If you don't
have the font I used in this tem-
plate, Photoshop may give you a
warning that the font is missing,
but it's easy to fix. Just select any
font available on your computer.
/ 3 v ' >art "■ P utt ' n 9 Pages Together
6.
To reposition the text on the banner, click to
select the Move tool from the Toolbox. (In
Photoshop Elements, the Move tool is repre-
ed by thfl double-headed, crossed-arrow
IttjIfsyifofiSe Toolbox.) Then click and
a^ecnon of^text to adjust it. Note that if
you click and drag a corner, you change the
size of the text; if you click in the middle of a
text area and drag, you move the text.
Profile-Banner.tif @ 100% [Jenny Hontz, RGB/EJ *
:::: <?
T %
if s
r
A few words about who I am q
13.333 inches x 1.764 inches (72 ppi)
■
Profile- Banner tit tf» 100% [A few woads about who I am, RGB/8] *
Jenny Horn
IA few words about who I am
1 00% 1 3.333 inches x 1 .76* inches (72 ppi)
7- If you have trouble selecting
text in the image, you can
click to select its layer in the
Layers panel to make it active
in the workspace.
Foreground Color
Foreground Color
Background Color
Color...
8. To change the background color of this
image, first click to select the Move tool
from the Toolbox, and then click in the
Layers palette on the right side of the
screen to select the Background layer.
Choose EditOFill to open the Fill Layer
dialog box, choose Color from the Use
drop-down list, and then select a new
background color. To change the color of
a section of an image, such as the blue bar
at the bottom of this template image, first
click the layer to make it active in the
Layers panel. Then click to select the
Marquee selection tool and use it to click
and drag, selecting just the area you want
to change before choosing EditOFill and
selecting a color.
Chapter 7: Creating a Profile or Portfolio Site / 3 7
'inn In *"l*3H-Utyj ASofttID
Flit Eoli liiiut Eniiai(f liheI i*K-rt FlKi
& Each of the templates includes its
own banner image, but you can
mix and match them and you can
add your own photos to any of
them like this: First open both the
photograph you want to add and
the banner image from the tem-
plate folder (here you see the
Portfolio banner from the Portfolio
template). You can open as many
images at once as your computer's
memory will allow by choosing
FileOOpen and selecting each
image in turn from your hard drive.
10. Make sure the photo you want to add to your banner
is the active image in the workspace; choose
SelectOAll to select the image, and choose EditOCopy
to copy it. Then click anywhere on the banner image
to make it the active image in the workspace; if an
image isn't visible in the workspace, you can make it
active by clicking its thumbnail in the Project Bin at
the bottom of the workspace or by choosing Window
and then selecting the name of any open image listed
at the bottom of the menu. With the image you want
to add the photo to active, choose EditOPaste to
insert the photo. The photo appears on a new layer.
Select the layer, and click and drag to adjust the pho-
tograph's placement on the banner.
9
\
f
r -i
L J
■ ■
\
portfolio-bBnner.tif @ 150% [Layer l r RGB/IE]
.1.
JASPER JOHAL PHOTO
— Pirai -Oron - —
Ottr. is™ i
tTm*$k Sim
- Lhi^rdEii —
ffltti Ml ft)*;
hU^n FJpbric
JASPER JOHAL
T O
PW8S
1 en 4 Jt-.l Kip:
■ ■ I'-
11 im
c-:d;
Pwsiii du
~ - r • i
/ 7. After you make these changes to the
banner image, choose FileOSave to
save it before saving a copy that is
optimized for the Web. To prepare
any image for your Web pages,
choose FileOSave for Web. In the
Save for Web dialog box, choose
JPEG or PNG-8 from the Optimized
File Format drop-down list in the
upper-right corner. The JPEG format
is best for images that use millions
of colors, such as photographs. If
this banner had a solid background
and only a few colors like this one,
the GIF or PNG formats are better
options. (You find details about the
settings in the Save for Web dialog
box in Chapter 5.)
Part II: Putting the Pages Together
besiqninq a Winning Online Profile
Stuff you rieed to
Know
Toolbox:
Adobe Dreamweaver
The Profile Template
(from www.
DigitalFamily .
com/diy)
Your own text and
images, to personalize
the profile
Time needed:
About half a day
When you have your images and content ready to go, you're ready to
download the profile template from the www. DigitalFamily . com/
diy Web site and get started. If you need help writing your own biogra-
phy, check out the nearby sidebar, "Telling your own tale." Follow
these steps to customize the template for your profile:
7.
In Dreamweaver, choose SiteONew Site. In the
Site Definition dialog box that appears, click the
Advanced tab. In the Site Name text box, type a
name for your site. In this example I'm creating
for my journalist friend, Jenny, I entered Jenny
Hontz Web Site. (For more detailed instruc-
tions on the site set-up process, see Chapter 6.)
Site Definition for Jenny Hontz Web Site
l_l
Basic Advanced
Category
Local Info
Local Info
Remote Info
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Site name: Jenny Hontz Web Sit
Local root folder: d Sites\Templates\ch6-templates\Unnamed Site 2\
Default images folder:
Links relative to: 9 Document Site root
HTTP address: http://
This address is used for site relative links, and for
the Link Checker to detect HTTP links that refer to
your own site
Case-sensitive links: □ Use case-sensitive link checking
Cache: [7] Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
OK
Cancel
Help
Choose local root folder for site Unnamed Site 2:
Select: ,. ch7-templates ▼ <$ t * EH]''
LZI
Name Date taken Tags
Portfolio-Template
Size
Rating
Recent Places
Profile-Template
Desktop
Artesian Media
PC
Computer
£>
Network S elect: ch7-templates
Open
Cancel
2. Click the Browse icon next to the Local Root
Folder field. In the Choose Local Root Folder
dialog box that appears, locate the folder on
your hard drive that contains the profile tem-
plate you downloaded from www. Digital
Family . com/diy. (Note: The folder is named
Profile-Template, but you can rename it, if you
like.) Click Open and then click Select to select
the folder and return to the Site Definition dialog
box. Then click the Browse icon next to the
Default Images Folder field and select the Images
folder inside the profile template folder. Leave
the rest of the options in this dialog box alone for
now, and then click OK to close the Site Definition
dialog box and save your settings. If you haven't
selected the Enable Cache check box, a message
box appears, asking whether you want to create
a cache for the site. Click Yes to speed up some
of the Dreamweaver display features.
Chapter 7: Creating a Profile or Portfolio Site / 3 ✓
Jetting your oWn tate
Drop facte
r own biography may seem
ask. After all, you're arguably
the best expert in the world on the topic of
you. But if you sit down to write your own
story and find that the words don't come
easily, rest assured that you're not alone.
Summing up your life in a few words or
paragraphs can make the most experienced
writers want to procrastinate with a run to
the fridge for a little snack or the inexpli-
cable impulse to organize a desk or closet.
To help you get started, here are a few sug-
gestions for writing your own biography:
Brainstorm a list of all accomplishments
or key points that you want to include
without worrying about writing them
well or putting them in order. Then
check each one off the list as you work it
into your written biography.
Ask friends or colleagues how they
describe you and what they consider
your best skills, and then use their ideas
in your biography. This strategy is also
a good way to get testimonials for your
Web site.
W Decide whether you want to create a
professional biography or a personal
one. Then set the tone based on that
decision. Consider your goals. When
visitors to your Web site read your bio,
do you want them to take you seriously,
or do you want them to appreciate your
creative vision? Do you want to focus on
achievements or use humor to bring out
your personality? Chapter 1 discusses in
more detail how to plan goals for a site.
v 0 Professional biographies are often writ-
ten in the third person ("she" rather than
"you" or "\") and in a more formal style.
If you're writing a professional biogra-
phy, imagine that an emcee will use it to
introduce you before you give a speech
to an audience who has never met you.
v 0 Personal biographies can be much more
informal, and are more likely to be written
in the first person ("I" rather than "he" or
"you"). In this case, you might imagine
that you're writing to a new penpal and
introducing yourself for the first time.
Remember that you can combine these
two approaches, using the first person
with a more formal style, for example,
or using the third person with a sprinkle
of humor and silliness.
Start your biography with your most
important accomplishment, a short list
of skills or titles, or a brief anecdote that
captures something important about
who you are. Your goal is to give read-
ers a good sense of who you are or what
you do even if they read only the first
sentence or two.
When you're finished, make sure to have
someone you trust review your biography
to make sure it reads well and covers the
most important points before you add it to
your Web site.
Part II: Putting the Pages Together
the site setup
process, the files and folders in the
profile template are displayed in
the Files panel in Dreamweaver, to
the side of the workspace. Double-
click the prof ile- template .
html file to open the profile page
design in Dreamweaver.
IAIOUI * fi
_ a x
fite tit. V*» Inurt MxJrty Forms* rcrrrrwnirs 5rt? t>nc*»r Hefc
xmtWvuM* rtr< * I
Oylu.cic
> - -•• I- ■ . ; -: ■ I- ■ ■ -: .
E i 1
Jbou; #10 1 am
-'jiu : ; .:-jo .<::>>
My biography - 1 leplmte tfas Late tea w*h
yxji tt.eatti'/. L\w mii vrom M*f at iitwt.
ccoseccecur adducing eirt, sed 6d eusmod
t*t>>> . .f ki..f it lit ...<f. m il-.V-rfr. rY|*grtJ
Headline Text
AW case nudes, lamplei • .f y«jt w tic. »e «u> nub. etc
B efface flu? Litiri ira wrtti your Uc© aj.hy L *etn u -sum cl ■
net. cooscctetur adfincng ett, sed do eiixnod trmpcr inr.
btore « ciilwe siieu akjusi Ui emm »4 rrirtm rmam. 1»
exerctatoc ulamc o labcos ran ut aitqop ei ea c onmdt CO
D115 »ute rure MtC m rtjpr»brr>'imt m vir^nptitr wsb oise c
dtiUte eu cu#ac nula f.*iiitu: Exce^nr ant occaecat cuf»J.
pxQuknl. sunt n ciip* qui o£cu deseni* ao&l sum ii ml:
Headline Text
Add cast itudrs samples of your week, tertrrorul: etc
IfpWnr' Ihn f Jltrn Irrf ffith ynitr Nr«nrnlT» 1 /vrrm ir*tiro &»
Common ^
1
•a
UHJmanedStei -ii'
aad vm »l
. . - O G 0 -
•j a* | 9
local We*
1
- O Stt unrnrifdSiei.. . Fc**
• O US KO
| <> HTM
CSS
Ferny I-.***. - Cfass far. B / 1= £1 tl
tr. None »| u*. - i»-.jk
£1 Trio i»y v** ate pay af lLM... i
profile-template.html x [
styles. ess
Source Code
rtesian Media PCOocumentslDlY Web Sites\Templates''j-h7-templa1esV )
^Code
3 Split
Design j*J Live View
Title: !
enny Hontz, award-winnii
i. P
[i :
feo n«5o ' [Eo [JIT; ^50 1300 |350 poo |450 |500 J Document Title
My Profile
4- Choose FileOSave As and name
the page index . html. (See the
sidebar "Creating new pages in
a profile site" for details on why
the main file of a site should be
named index.) Then change
the page title by replacing the
text in the Title field, at the very
top of the Dreamweaver work-
space. (Note: The page title isn't
displayed in the body of the
Web page; this is the text that
appears on the title bar at the
top of the browser window.)
5. To insert an image in the top of this
design, click to select the graphic that
reads My Profile and then click the
Browse button (the yellow folder icon)
for the Src field of the Property
Inspector.
:
i I i i 1 1 1771 ■ I ■
:'. \". \ j :
Itw i™
UaaaaaUaUaM
My Profile
A few words a torn ah:
Hpartlinfi Text
Add cire ifc*ii£E r sauries of pour work, ttitiniMrMi, etc
RtfJaoe this Latin lesc uiirti y«f fci^grapJr/ l^rwn Jo
anuet, caiseaenit aiipiijcing elt, re i -to ausau«l [tu^or mc-
lT|f? CI. ■' 763 eHS - act 1 3 me Unt.d. [UTF-bCi
[n&jE., L1K n ?w
H Ii7
3rc oTs|i*of'(-0<Tinei ong
ur*
Siowstroi File ^ :
Jut r+:f*
Chapter 7: Creating a Profile or Portfolio Site
Dw Select Image Source
Select file name from: • File system
Data sources
Site Root
Server..
Jenny-blue.jpg Jenny-Hontz.pngtf Jenny-Hontz-200
File name: Jenny-Hontz.png
Files of type: Image Files f.gif;''.ipg;''.ipeg;*.png;''.psd)
Cancel
URL: images/Jenny-Hontz.png
Relative to: Document
index.html
Change default Link Relative To in the site definition.
Image preview
J«nny Huntx
960 x 127 PNG. 11K / 2 sec
6, In the Select Image Source dialog box that
appears, navigate your hard drive to find the
image you want to insert and then double-
click the image filename to select it. If the
photo or other image you select in Step 6
isn't already located in the local root folder
of your site, Dreamweaver offers to copy the
file into the root folder. (You find more
detailed instructions for adding images in
Chapter 6.)
H Preview images
7- If the Image Tag Accessibility Attributes
dialog box opens, type a brief descrip-
tion of the image in the Alternate Text
box. (This text will appear on the page if
the image isn't visible.) You can use the
Long Description field to link to a longer
description of the image in a separate
file. Click OK when you're done.
Image Tag Accessibility Attributes
Alternate text: Jenny Hontz ▼
Long description: http://
If you don't want to enter this information when inserting
objects, change the Accessibility preferences,
OK
Cancel
Help
Dw Select Image Source
Select file name from: • File system
Data sources
Look in: Details
Name Date taken Tags
Size
!
Details-Articl... Details-Articl... Details-Articl... Details-Articl...
Details-Articl... Details-Articl... Details-Mag... Details-Magazi
File name: Details-Magazine-cover-200.jpg
OK
3
Files of type: Image Files r.gif^.ipgf.jpegj'png^.psd)
Cancel
URL:
Relative to:
articles/Details/Details-M agazine-co ver-200. ipg
index.html
Document »
Change default Link Relative To in the site definition.
200 x 255 JPEG, 24K / 4 sec
[7] Preview images
5. You can add more images by click-
ing to select any of the placeholder
images and using the Browse
button (the yellow folder icon) in
the Property Inspector to replace
an image. You can also add images
by clicking to place your cursor
where you want the image to
appear, and then choosing
InsertOlmage to insert any image.
In this example, I'm adding a copy
of the cover of a magazine from
Jenny's portfolio.
Part II: Putting the Pages Together
To align an image so that text wraps around
next to it, click to select the image. Then, in
the Property Inspector, use the Class drop-
own rpenlLi toselect float-right or float-left
aJgriml^TrKe. (Note: These are styles
ha*n createa wnen I created this template.
You find similar styles with every template
because aligning images and other elements
to the left or right is a common option. These
styles were created using the Float left and
right options in CSS You find more about CSS
in Chapters 4 and 6.)
DO . |350 400 450 500 : 550 600 650 700 750 000
i 1 1 i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 i 1 1 1 1 i
Does Privacy Exist?
idd case studies, samp les ofyouJ I whyitf*ystob(
'ork, testimonials, etc j
LANCE
ARMSTRONG
AMERICA'S
V PLAYBOY
Replace this Latin text with your
biography. Lor em ipsum dolor sit
amet, consectetur adipisicing elit,
sed do eiusmod temp or incididunt ut
lab ore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exer citation ullamco labons nisi ut
aliquip ex ea commodo consequat.
Duis aute lrure dolor in
reprehendent in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit arum id est
laborum.
Headline Text
IOUT ^
[» SWT
i "i i I i i i i
Headline Text
work, testimonials, etc.
None
article-box
article -box- 8
citation
contact-box
float-left
Add case studies, samj: float-rightj^j|^|
image-capXion
image-credit
Replace this Latin text with your biography. Lorem ipsun title-style
amet, consectetur adipisicing elit, sed do eiusmod tempo: tOD-h©3d
lab ore et dolore magna aliqua. Ut enim ad minim vemam :
<div#middlecol> <p>|<imq>
Rename...
CC 1100% v[762x447v S2\ Attach Style Sheet.
Src lagazine-cover-200.jpg Q Alt Details magazine ▼
Link Q,q Edit & ff ^
CD
/ 0. To edit the text on the page,
click and drag to select a head-
line or other section of text, and
then type to replace it. Note
that you can also use copy and
paste to replace this text with
text from another file, such as a
word processing document.
/ 7. It's good practice to use CSS styles for all your
formatting, especially if you use the same styl-
ing consistently, but if you just want to add a
little formatting to a few words, you can use the
formatting icons in the Property Inspector (at
the bottom of the work area) to add bold, italic,
and other formatting options. To remove bold
or italic formatting, simply highlight the format-
ted text and then click the Bold or Italic button.
The Gospel of Luke
By Jenny Hontz
on magazine
Hollywood's favorite guy-next-
door heads for the hills to turn
director and feel out fatherhood.
But is Texas son Luke Wilson
ready to call the shots?
Jiv#middlecol> <p>!<em>|
k\^J ^ 100% v 762 x 447 v 76K / 1 1 sec Unicode (UTF-8)
Class None
Link
▼ B 1 1 ^ •= IB M tM Title
Italic I Tara - et
Chapter 7: Creating a Profile or Portfolio Site J ^3
jilaf^is designed with a set of head-
5 K?^5 want to add more headings
orcnan^e therormatting of a heading, click
and drag to select the text you want in your
heading and then choose one of the Heading
styles.
Game Time in Botswana
At safari camps, signs of peace
and peril
None
Paragraph
Heading 1
Heading 2
Heading 3
Heading 4
#container> Headings
Heading 6
By Jenny Hontz
Washington Post
At Dub a Plains safari camp in
Botswana's Okavango Delta, there
was fighting within the pride. A
^ness had killed four
_s, and their mother, breasts
rged with milk, cried out
tir
Format
ID
— Preformatted
<div#middlecol>|<hl>| 1 1 k*5 ^
100%
762 x 447
Heading 1
None
Class
Link
None
B I
JS tM tM Title
Target
CSS Rule Definition for hi in styles.css
Category Type
Background
Block
Box
Border
List
Positioning
Extensions
Font-family: Verdana, Arial, Helvetica, sans-serif
Font-weight:
Font-size: large
Font-style:
Line-height:
F
Text-decoration: O underline
HI overline
HI line-through
□ blink
Onone
Font- variant:
Text-transform:
Color: |
Help
OK
Cancel
Apply
All Rules
— #articleContent
— #leftcol
— #middlecol
-hi
-h2
— #rightcol
— .top-head
— #photo
— #photo p
— a: link
a
Properties for "hi"
color
font-family
font-size
margin-bottom
margin-left
margin-right
margin-top
padding
Add Property
73- This template includes CSS styles
that control the font, color, and
size of the text when you apply
Heading sizes 1, 2, and 3. To
change these options, in the
CSS Styles panel (choose
WindowOCSS to open it), double-
click to select the hi or h2 style.
The CSS Rule Definition dialog
box appears, where you can edit
the style settings, such as color
and font face. You find more
details on editing and creating
styles in Chapters 4 and 6.
/4- To change the colored stripe down
the right side of this template
design, you need to remove or
replace the background image
that is set in the style called
#mainContent. The advantage of
creating this stripe of color with a
background image the way I did in
this design is that it automatically
adjusts to fill the column whether
you have a little text or a lot of text
in the other two columns on the
page. To change the background
image, double-click the style named
#mainContent in the CSS Styles
panel and then choose the
Background category in the CSS
Rule Definition dialog box.
CSS Rule Definition for #mainContent in styles.css
Category Background
Type
Background
Block
Box
Border
List
Positioning
Extensions
Background-color: J #FFFFFF
Background-image: .. /images/background. png ▼
Background-repeat:
Browse.
Background-attachment :
Background-position (X):
Background-position (Y):
▼
px
▼
px ▼
Help
OK
Cancel
Apply
All
All Rules
Current
B styles.css
—body
— #container
— #container2
— #header
— #footer
— #mainContent
— #articleContent
-#leftcol
— #middlecoJ
Properties for "ttmainContent"
background-color Q #FFFFFF
background-image url(. ./images/backgroun.
l o-
in
margin
padding
Add Property
/ t} ^ art " : Putt' n 9 the Pages Together
75. I included three different background images
that you can choose from — background-
blue . png, background-red . png, and
korounol-Qrey . png — but you can create
"^A^r^ 1 ^^ 1 ^ image using any color.
p:*m eTOure^Tat the background fits this
design, open the file background, tif in
Photoshop or Photoshop Elements and replace
just the colored region in the image.)
3H Select Image Source
Select file name from: » File system
Data sources
Site Root
Server...
Look in:
Name
image::
Date taken
Tags
Size
background-blue... background-grey... background-red....
background-blue, png
OK
Image Files (*.gif; x .ipg; x ipeg;''.png;*.psd) ▼
Cancel
URL:
Relative to:
/Profile-T ernDlate/irnaqes/backqround-blue. pnc
Document
Change default Link Relative To in the site definition.
Chosen file is not under site root.
) Preview images
Image preview
960x19PNG,4K/1 sec
Jyany Hwili, iw.iril wiiiriiiq; |nm afeEl r intirartDi wdnitdli CnrmfaM M:
|fiie Eflt Htfnry fcrjritmim ltd tf:ti grliteJUnir
Fnw^nl ■• Rfelopd Harps DrjwrilaiidHHrirji un-*"l r^wh shn* 1-Cf^Jr"nny HonJ 2 - CnrV''d'ji him!
Jenny Hontz
f"rward-winrung jDUPulsl,. instaicirx and rriEd ia consultant
■Jenny Honri m hji swsfid-wmmiajJ'tfiiiduT,
■■ ; I ■ ■ :■ -■■ I . -. i- • ■ ■ " ■ • : •:
She has '*n1len for pubbciEorar such as The A'ew
, i. >■>; (■■.-. . . :
Harprrk iiiriTiir, Sunset IA ffiw.'rr/, Bt&vir,
A/'grlrJKi, HtoW', Sfot?f<!, £*<-<'.?&h Elfa !i* -^ib
UK £>*!*V tew VlA.tytt-Ttoltobb
j&r-CMi, DmsLA.ccm aid Human E1.3fr.jsr Hcr
fcms ranges from hard new; aid [TKio.si.abv:
itfj-tiiiifi fciiwfCMr-*i mdi as F-od uwi,
ii±oHl. Clji«i . cTifdiJj. Im.-ciW dtL jl,
IxKtyir trends and ■relttrtHS
. ., . .„ i - ■ ■ ■ ■
Samples or Jenny's Articles
Dues Privacy Exist?
By Jcfur? Horns
Mi fiber yon dtnaied sperm
L =■ - r r! 41a ta Fxthtnik. lajri
imck, )r*iir pethumI [into is
^eusg. Ir-ideJ fnwly nn mcial-
■abnririirg fjlBd. Ann rt"r tor*
lata Id bit afraid.
Il wiiii't qoAe the wtxL&ftg gjtt Jit
expected Josh, a jA-jezi-M
carpeirtEr from upstair Htw York was three wericr awa/ from the bnc.
■lar/lafr jptinE wteilit e ■< an tmrifitfiu 1 in.AiiflCi'uU'iinini hrcirjjat
lie wee tic ftnh.tr qI a 1 j-pciir-tJd toy, (Read, rjil arj-r-lc )
pffitni
Tilt Gospel of Luk*
Et Jenny rUnLc
/6. To view how your page will
appear in a Web browser,
choose FileOPreview in
Browser and select any
browser you've associated
with Dreamweaver. It's always
good practice to test your
work in a variety of Web
browsers. (You find instruc-
tions for previewing in differ-
ent Web browsers and adding
browsers to Dreamweaver in
Chapter 10.)
Creating new! pages in a profile site
The main page of any Web site should be
named index.html. (If you use a Windows
server, you may need to change the name
to default.html.) The rest of the pages
can be named anything you like, as long as
you don't use spaces or special characters
(hyphens [-] and underscores [J are okay),
and you include the . html extension at the
end of every page. (Dreamweaver adds the
extension for you automatically when you
create and save pages in Dreamweaver.)
You can create new or additional pages
for your site from the profile template fea-
tured in this chapter by simply choosing
FileOSave As and giving the file a new
name. (Just be sure that you don't delete
the extension.)
Chapter 7: Creating a Profile or Portfolio Site
Customizing the Portfolio Home Page
\J — $iaf\ jlou ^
Need to Know
Toolbox:
v 0 Adobe Dreamweaver
j> The portfolio template
(portfolio . zip
from www.
DigitalFamily .
com/diy)
Your own text and
images, to personalize
the template banner
Time needed:
About half a day
After you edit the image that will appear at the top of your page design,
you're ready to start working on the template by adding your own text
and images to make the site your own. If you followed the planning
steps in Chapter 1, think of this step as the one where you get to add all
the content you collected at the beginning of this book. If you skipped
that chapter, don't worry: You just have to do more preparation to get
your own content ready before you can follow all the steps in this
section.
The portfolio template created for this chapter is made up of several
pages, including five template files that can be used to generate addi-
tional pages. The template files are saved in the Templates folder,
which is inside the main Portfolio Template folder. These template files
are special because they use the Dreamweaver Dynamic Web Template
features, which is why the filenames end in . dwt rather than . html,
like the other pages in this site. One of the biggest benefits of using
Dynamic Web Templates (as you see in the following steps) is that
when you make a change to a template file and then save it, that change
is automatically applied to all pages in the Web site that were created
from the template file. You find instructions for how to create and edit
templates like these in Chapter 6.
In this task, you find instructions for editing the portfolio template files
to add the banner image to all pages in this site, as well as how to edit
the front page of the site. To set up your portfolio site in Dreamweaver
and edit the home page, follow these steps:
/. In Dreamweaver, choose SiteO
New Site. In the Site Definition dialog
box that appears, click the Advanced
tab. In the Site Name text box, type a
name for your site. In this example, I
entered Jasper Johal Photography.
Site Definition for Jasper Johal Photography
Basic
Advanced
Category
Local Info
Remote Info
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Local Info
Site name: [jasper Johal Photogi
Local root folder: C:\Users\Artesian Media PC\Documents\DIY Web 1 Q
Default images folder:
Links relative to: o Document _ Site root
HTTP address: http://
This address is used for site relative links, and for
the Link Checker to detect HTTP links that refer to
your own site
Case-sensitive links: □ Use case-sensitive link checking
Cache: \7\ Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
OK
Cancel
Help
Part II: Putting the Pages Together
2.
Click the Browse icon next to the Local Root Folder text
box and locate the folder on your hard drive that con-
tains the portfolio template files you downloaded from
. Digital. Family . com/diy. Then click the Browse
peVrtatMe iQault Images Folder field and select
rrrage^oiderHLeave the rest of the options in this
dialog box alone for now, and then click OK to close the
Site Definition dialog box and save your settings. If you
haven't selected the Enable Cache option, a message
box appears, asking whether you want to create a cache
for the site. Click Yes to speed up some of the
Dreamweaver display features. (For more detailed
instructions on the site setup process, see Chapter 6.)
Local Info
Site name: feMlUWH^
Local root folder: C:\Users\Artesian Media PC\Documents\web sites
Default images folder: C:\Users\Artesian Media PC\Documents\web sites ^
Links relative to: o Document Site root
HIE
ASSETS
It 3 ! Portfolio Template
Local view
& c
0 0
13
Local Files
Siz *
E.-IEj)
gallery 1
galleryZ
gallery3
gallery4
images
Templates
gallery 1 .dwt
galleryZ.dwt
gallery3.dwt
gallery4.dwt
main.dwt
3Y
3h
rn
1 local items selected tota
Log,
4- In the New Document dialog box
that appears, choose Page from
Template from the far left. Then
choose main from the list of tem-
plates. A preview of the template
is displayed in the far right of the
dialog box window. Click Create
to create a new page using the
selected template.
3- After you complete the site setup process,
the files and folders in the template are dis-
played in the Files panel in Dreamweaver, to
the side of the workspace. To open a folder
in the Files panel and display its contents,
click the plus (+) sign to the left of the folder.
In this figure, you can see five templates in
the Templates folder. To create the first
page in this template site, choose FileONew
to open the New Document dialog box.
New Document
Blank Page
L^ft Blank Template
4^ Page from Template
Page from Sample
Other
Site:
Template for Site "Portfolio Template"
A. Eclectic Film Sales
A Experimental Musical !
A Fallow Deer
A Family Template
A Flamingos
A. Frank Vera
A. Jasper for DIY
A. Jasper Johal Photogr;
A JC Warner
A, Jenny Hontz
Ai Joomla sandbox
A Karen Ward
A Loos Family
A. MakesYouCrazy.com
A, Mark Jenkins
A Matthew Mitchell
A. Michael York
jft Our Warner Family
Ai Pamela's Pet Services
A. Portfolio Template
A, Profile TemnUte
< | III | ►
Add your headline here
Add to* tBtrM Add»W taMt hava Add >W Indtt-M. Add
far tii t hat* Add t-** totm Add fc<r t*»l rwr» Add far
tartt t-ara Addinjr iMthm Add >«v iMthm Atd w iasd
t r-ara. Add »w fa* r« Add «W twd
1 f«r« Add »wx ta«t Kara . Add ««j t«Mt
thara. Add >nr IsMt hara Add >sv laWt
than Add stux la** t-aca Add »w tao*
<i*UiKTI Q*Ufftr* 1«Ui*rr) 4*1
DocType:
0 Update page when template changes
Help
Preferences..
Get more content...
Create
Cancel
Chapter 7: Creating a Profile or Portfolio Site
FASHION
ft
HOME
CALLERV1
CALLEllY?
Fkr
I |4
1 — 1 1
URL ■ _■■ .-i .
■> PHvbwitugtt
D ccpvnqht JDOP
1
L
JUL
7K2<91]' l.3Kf£sac Ur*«Js 4JH=^!I
ri'.vi in.
P
<>,_j lit ftwto
iiJ l» Ohm
'_ latAx SETT
* -i - ■ - 1 i »s
■+ O tc99 rji
§ htfcs.htn) ntcrj
~" hdrtZ.htnil 4KB n
- i=i.i .;.,r-_ J... I •
, n
5. You can replace any of the images
in this page design except the
banner. Just double-click the gray
box that serves as an image place-
holder for the image; in the Select
Image Source dialog box, click to
select the image you want to use in
its place. (If you use this method,
be sure to then click to select the
image; then, in the Property
Inspector at the bottom of the
page, change the text in the Alt field
by deleting the word Photo and
typing in a text description of your
image.) For the best results, insert
images that are the height and
width specified in the image place-
holders so that they fit within this
Web page design. If you want to use
larger images, you may need to
change the width settings in the
corresponding styles. See Chapter 5
for help resizing and optimizing
images for the Web.
6. Repeat Step 5 until you replace or
delete all the images except the
banner. (Don't worry: You'll get to
the banner soon.) If you don't want
to use images in all three boxes,
you can delete any of the image
placeholders by first clicking to
select the image and then pressing
the Delete or Backspace key on
your keyboard. Then simply enter
any other image or text in its place.
Note that when an image is
selected, the options for that image
appear in the Property Inspector.
r
Ull
RBT" BIB |£B
Tu HJj OH [HE rrj] EE fTTl ITCC P*5 Bjj B?il
i ml 1 1 nl ii n 1 1 1 nli 1 1 1 1 mi 1 1 mill 1 1 In ill 1 1 1 1 fin 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 inlii 1 1 I nil In iiliinl 1 1 1 ill i n 1 1 11 1
FASHION
INI
« J,
<t>:<fc.CfieCCiFi>OH:»> <*#C0tlt-3*ner> <dw»rrari:ortert> <tro*n^fi|fiwQ»>
%_\fi ^ haji^vssi *sei- i5*,i«»t made (inr-si
Class Nam
Part II: Putting the Pages Together
Dro pBonks
[300 - — [350 ; 1400 1450 500 550 fcOC ,
I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i I i i i i | i i i i | i i ' I
fit £J T
0
Portfolio (960 x 65)
7. If you try to select the banner image at
the top of any page created from a tem-
plate like this, you may be frustrated
that you can't edit it in a page created
from the template, such as this
index.html file. That's because it's in
a locked region and can be changed
only in the template file. You can tell
the difference between locked and
unlocked regions because when you
click anything in a locked region, the
cursor changes to a circle with a line
through it — the universal symbol
for "You can't do that." Among the
many benefits of locking a region,
such as this banner, in a template in
Dreamweaver is that when you edit the
banner in the template file, you can
automatically update all the pages cre-
ated from that template.
8. To change the banner image in the
template, first open the template
file named main . dwt, which is
saved in the Templates folder. You
can open a template file like you
would open any other page in
Dreamweaver, by double-clicking
its name in the Files panel or by
choosing FileOOpen and selecting
the file.
Rlr Edit Wrw InKrt Modfy Form it tcmrmndr Site Wndm Help
_ fl w
*
It
5bt t^.
iWiViu-)*
: ! ■■ ■ i ■■ ■ ■ ^ ■ ■! ■ ■ ■■ K*fl ■ i ■■ ■ ■ ■! ■ ■ ■■ hflfl ■ i ■■ ■ ■ tffi ■! ■ ■ ■■ Yff, ■ i ■■ ■ ■ [ffi ■! ■ ■ ■■ \ff, ■ i ■■ ■ ■ ■! ■ ■ ■■ tff, ■ i ■■ ■ ■ fffi ■! ■ ■ ■■ hflfl ■ i ■■ ■ ■ ftffi ■! ■ ■ ■■ iTfl ■ i n ■
■
5:
| O HTM. I
SfaCSS
DO runt
B /
±i u rub
| P^Pihi»1m... I Lai In,-. ...
nmon T ^ _^ A 4i
MELDhEKF;
O I 0- & ^ trj I □
■ ■■ ill r lr
_1 .J-rt.,.1
- g3br.l.du«i 31
' .. ■■ ■ 31
' i.. -.- . ■ 91
G*rrhA*t ail
*«Jt.i*ii
■
f£ tiib" Portfbin nmiL i na; | Lnj.. . |
Chapter 7: Creating a Profile or Portfolio Site ^ A 4}
9.
With the template file open, you
can change the banner image at the
top of the page by double-clicking
banner iliage and then using
e^rtirweV^urce dialog box
setecrt xne image you want to use
in its place. In this case, I replaced
the placeholder image with the
template banner that I customized
in the first task in this chapter,
"Customizing the Banner Graphics."
(Remember that you should click
to select the image after it's
inserted and then enter a text
description of the image in the Alt
field in the Property Inspector.)
Portfolio (960 x 65)
)dy.oneColFixCtrH<
Dw Select Image Source
Select file name from: » File system
Data sources
Look in: , . images
Name Date taken
▼ @ t ° [lill-
Tags
Size
4k
1 h<i-I.K
main-Dances.jpg jasperphoto_fron.,
Jasper-Johal-Pho1
graphy.png
File name: Jasper \J ohal-Photography.png
Image preview
qp;n v pnr, 5K / 1 sec
Type: Adobe Fireworks PNG File
Dimensions: 960 x 59
Size: 4.30 KB
Files of type: Image Files (*gif;*jpg;''.jpeg;' < .png;*.psd)
Cancel
URL:
Relative to:
. . /images/J asperJ ohal-Photography . png
Document ▼ front, dwt
Change default Link Relative To in the site definition.
\7\ Preview images
8)
;OPERTIES
Placeholder
W 960
Src
Link
SJQ Alt
Portfolio Banner
Class
None ▼
ID Portfolio
H 65
|s» Create ]
JASPER JOHAL
P H O
ainlmage
Update Template Files
Update all files based on this template?
index.html
Update
Don't Update
mainlmage (930 x 425)
10. When you save the template file with the
new banner, Dreamweaver launches the
Update Template Files dialog box with a
list of all files created with the open tem-
plate. In this case, only the index page
was created from this template, so it's
the only one listed. To apply this change
to the index page, click the Update button.
If the template had been used to create
many pages, this process would update all
pages created from the template — a
useful time-saver when you're working
with many similar files, such as the gallery
sections of this Web site.
Part II: Putting the Pages Together
Creating and Linking Pages using
Templates
stuff you
Need to Knotf
Toolbox:
Adobe Dreamweaver
^ The portfolio template
(portfolio . zip
from www.
DigitalFamily .
com/diy)
Your own text and
images, to personalize
the template pages
Time needed:
About half a day
The Portfolio template features four Dynamic Web Template files that
can be used to generate additional pages. I've given you four gallery
templates, and you can create as many as you need to manage as many
galleries as you want to feature in your site. In this task, you create new
pages from the galleryl template and make global changes to the
pages in the first gallery by editing the galleryl template file.
Because the gallery pages in this Web site include many thumbnail
images that are repeated on every page of the gallery, this is an ideal
use for templates. I find it simplest to start by creating all the gallery
pages from the galleryl template and inserting the big image (the
only image that changes from page to page). Then I go back and insert
the corresponding thumbnails and set the links in the gallery file itself
because it's always easier to set a link when you already have pages
created to link to. The thumbnails in these gallery pages are intention-
ally saved in a region that can be edited only in the template itself so
that you add them all just once in the template, and they automatically
update in all the pages created from the gallery. You see how this works
in the following task.
Before you can complete this task, you must complete the site setup
process to load this entire template folder into Dreamweaver. If you
completed the preceding task, "Customizing the Portfolio Home Page,"
you should be ready to go; if not, you first need to complete Steps 1-3
in the previous task. (For more detailed instructions on the site set-up
process, see Chapter 6.)
7. Start by creating a new page from
the galleryl . dwt template by
choosing FileONew. In the New
Document dialog box that appears,
choose Page from Template from
the far left. Then choose galleryl
from the list of templates. A preview
of the template is displayed in the
far right of the dialog box. Note this
template is designed to create a
gallery with eight thumbnail images
and one large image in the main
area of the page, but you can alter
the design by adding or removing
image placeholders or by replacing
them with images of different sizes.
Click Create to create a new page
using the selected template.
r
Blank Page
Blank Template
Page from Template
New Document
Page from Sample
Other
Site: Template for Site "Portfolio Template":
Eclectic Film Sales
galleryl
Experimental Musical !
gallery2
J JJ
Fallow Deer
gallery3
si
Family Template
gallery4
Flamingos
main
Frank Vera
jjj
Jasper for DIY
jjj
Jasper Johal Photogr;
si
JC Warner
&
Jenny Hontz
&
Joomla sandbox
&
Karen Ward
&
Loos Family
&
MakesYouCrazy.com
&
Mark Jenkins
&
Matthew Mitchell
&
Michael York
&
Our Warner Family
&
Pamela's Pet Services
&
Portfolio Template
&.
4 I
Profile Temnlate
HI J ►
XHTML 1.0 Transitional -
DocType:
0 Update page when template changes
Help
Preferences...
bet more content.
Create
1
Cancel
Chapter 7: Creating a Profile or Portfolio Site / ^ /
2.
Keep each collection of gallery
a separate folder so you
irrfciave to worry about dupli-
caierue names. In this example, I
created a new folder called galleryl
and saved the file with the name
photol .html. (You can create a
new folder similar to how you save
a file in Dreamweaver: Clicking the
New folder icon in the Save As
dialog box.)
Dw Save As
Save in: galleryl
Recent Places
Desktop
K
Artesian Media
PC
Computer
Name Date mo... Type Size Tags
This folder is empty.
Create New Folder
X. I File name:
Network S a ve as type:
photo1.html »
Save
All D ocuments f. him;*, html;*, shtm;*. shlml;*. hta;*. htc;". xhtml;". ▼
Cancel
Site Root
Z (Canonical Decomposition, followed by
Unicode Normalization Form:
Include Unicode Signature (BOM)
3. To replace the image placeholder
in the middle of the page with a
photograph, double-click to select
the placeholder image. Then, in the
Select Image Source dialog box,
click to select a photograph to
insert into the page in its place.
Click to select the image after it's
inserted and enter a text descrip-
tion of the image in the Alt field in
the Property Inspector. To add a
caption, click to place your cursor
beneath the photo and then type to
enter text. (Don't worry about the
banner image at the top of the page
or the thumbnail images across the
bottom. You replace those images
in Step 5.)
Add a unique title to the top of each page as you create it by replacing the text in the Title field at the very top
of the page. Using specific titles with keywords can improve search engine results for pages in your site.
y G£ P art " : Putting the Pages Together
4.
To create additional pages for the
gallery, repeat Steps 1-3, saving all
the files in each gallery with a new
e^such a| photo2 . html,
e^alferyf fofcrer. In this site for
Jasper, I used eight thumbnails and
eight pages in each gallery. If you
use eight images the same size as
the ones I used, you can use this
template exactly as I created it. If
you delete or add images, or if you
change the sizes, you may need to
make adjustments to the designs in
the CSS. (You learn more about
editing CSS and templates in
Chapters 4 and 6.)
iftVm inn hi T nil I i
[55 \\(* , \\U [77 [55~ — prr; — EC bsjt — pr" — S55 Ey; r7r~
1 1 ' " ' 1 ' " ' 1 " ' 1 " 1 ' " ' 1 ' " ' r 1 ' ' ' ' " ' 1 I ll I I I I I 1 I I 1 I I I I I I I I I I I 1 • '
Fanfoio<960x6O)
C«-_- % H 4 m\
b □ a - * - a a q
a,. <>. g. sp
_1 i«pn'jc<MiFt«K y] |LacJ»«m »|
» e | o o >y * * | g
I i • I 'I'- |S». »
_j » j jr.
nfet.Durt
rnorrans
., ^
• me.
Ml
9 13
>W»
1
fO; j rod
fi«JokrIer(«*.ttril
1
uto
JASPER JOHAL
Update Template Files
Update all files based on this template?
galleryl\index.html
galleryl\photo2.html
galleryl\photo3.html
galleryl\photo4.html
galleryl\photo5.html
galleryl\photo6.html
galleryl\photo7.html
aalleryl\photo8.html
Upda [^
Don't Update
5. In the gallery templates, the banner
graphic is in a locked region at the
top of the template, and the thumb-
nails and copyright information are
in a locked region at the bottom. To
edit these images, first open the
galleryl . dwt file, located in the
Templates folder. Replacing the
banner at the top of all these gallery
pages is easy. Double-click the place-
holder image at the top and select the
banner image you created for your
site. (Find instructions for customizing
a banner image in the first task in this
chapter.) After I add the banner image
to the template, I choose FileOSave to
save the template, and Dreamweaver
prompts me to update only the eight
pages I created with this template.
Chapter 7: Creating a Profile or Portfolio Site J S3
6.
Adding and linking all the thumb-
nail images at the bottom of each
gallery template will take a little
e, t>ut it ^orks the same
MjiM^ SSiing four thumb-
agfes ro mMiome page
design or eight to each of the gal-
lery templates. Because you're
adding the thumbnails images and
links to the template, Dreamweaver
will add them to all the pages in
your galleries automatically, saving
you having to set all those links
multiple times, and making it easy
to add or remove images to all the
pages later. To replace each thumb-
nail, double-click the placeholder
image in the template and select
an image sized to fit this template
design and saved in the PNG or
JPEG format. (You find instructions
for resizing and optimizing images
before you insert them into a tem-
plate in Chapter 5.)
f:
R...>....n°.......li
—
Select lino je Source
Octal Ik nane Iimk n rfc syile - .
nod
Loot- it moots
Mams Dale lat ru T-suv Ziti
I i' i "•• I ! TAGME
SlfcSOOJa^i... 930Jaa_fj-i.li... «Cw500Jaih... SSOmSHJaili.,
*W Aft liMI V
MQrtNNjnsh... ■mrtfla.f.nh... SUrrtnnjash... miMflfljfiiiH..
■
Hki ul Ikb j Invsgn F1m J" n*:' p*sf" W puiy ^] Lara!
I IRI /jplwyl /mAgMxWmn_Mihii^i_F [mj
7
IS— BS— BTHJ— Rlir; ES5—
■ ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■
■=
HOME FASHION
' Siffiii:! "FHe
? d tot lite i_ nc from: « fie lyiluri
0 ID1TC4E
iervci
J L-nLiri ^ g_bij1
Nana | Date mn..
J. .notes
irl<Je=.htHftl
|j ph_tQ3.hYtml
| j phutu^l i Li 1 1 1
■I ■ .1
T»lt
Shs Tags
__chataa.html
Bphatu4.h/t~il
phntnfl.rVtml
phatafl.Nbnl
Fin
pl_l_?.lilnl
Fica of type: AJIFi«|V|
Cant-d
URL
Refeftveln
Lh_-Mi aalaul bit-. Hd-h,-y To ri ll» _te cbkntan
f >
Qnage, SK.
L.
.. i .
HE]
3: je^th-i_f_*ion_B.pr>g Ht FasMonffwtD
Ltik phrtoZ.rVtml ^ __t E4t £1 ^
Class None
7- Link each thumbnail image to its
corresponding page by first clicking
to select the thumbnail image in
the page and then choosing
InsertOHyperlink; or, click the
Browse button (the yellow folder
icon) next to the Link field in the
Property Inspector. In the Select
File dialog box that appears, click
to select the page you want to link
the thumbnail image to, and then
click OK to set the link. Repeat this
step for each thumbnail. After I add
and link all the thumbnails, I save
the page again, and again click
Update in the Update Template files
dialog box to add the thumbnails to
all the pages.
y j I) Part II: Putting the Pages Together
8.
^nuusc any u
1"^ rngalleryl fcide
DropTOk
To test the links, double-click to open the
photol .html page in the galleryl folder.
Choose any of the pages you created in the
aUeryXfcjder^click the Preview in Browser
the workspace (it looks like
n choose the browser you
want to use to test the page. You can also
choose FileOPreview in Browser and then
select a browser.
Title: Jasper Johal Photography f\ft w
400 , 450 , SOU 550 ,
1 1 1 1 i 1 1 i 1 1 1 1 i 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 I 1 1 1 1 1 1 1 1 1 1 i
) H A L
P H
Common ▼
_E3 i=i fail 6a
Preview in Firefox 3
Preview in IExplore
Preview in Device Central
Edit Browser List...
F12
Ctrl +Alt+F12
IO Jasper Johal Phott
& C | 0 0
Local Files
E £3 galleryl
J FR (S> images
V Jaaptr Johal Ph*lD*rap*y Manila Flratex
E<« l4it yi«w Hi*r»y friol-msrt! Tool; Help grated Lnto
J asp ci Joajal FTiiMoiaiadhy
JASPER JOHAL
H Y
HONE FASHION YOCA DA.NCL NUDES BIO RLSOURCES CONTACT BUY ART
XjifMf JcVli>.' CXOt
7 *
& Click each thumbnail image in
turn to make sure that you set
the links properly. If you find one
that doesn't link to the correct
page, open the template again in
Dreamweaver and correct the link
in the template. When you save
the template, the corrected link
will be updated in all related gal-
lery pages.
10. To test the links on each thumb-
nail, preview the page in a Web
browser by clicking on the
Browser icon at the top of the
workspace or by choosing
FileOPreview in Browser and then
selecting a browser. Clicking the
each thumbnail in turn across the
bottom of the gallery and each
thumbnail should link you to the
next page in the sequence. If you
find that you missed one or need
to fix a link, just open the file
again in Dreamweaver, click the
graphic, and re-create the link as
you did in Step 7.
it Jasptr Johil PlwtDjrapfcy Manila Flretax
fit fclrf Hi**y BookTOrt! loolj Help a<<*e<Ltilf!
Jaspei Jofcal PtiMopaphy
JASPER JOHAL PHOTOGRAPHY
HONE FASHION YOCA DANCE NUDES BIO RESOURCES CONTACT BUY ART
» * f * i ou. m m $ m <
Chapter 8
DropBocfafating a Business Web Site
Once in a while, I still meet small-business owners who ask,
"Do I really need to have a Web site?" Today, the answer
is easy: "Yes." And, increasingly, the owners of even the smallest
businesses have caught on to the many advantages of creating, or
extending, their business online: Creating a site for a business can
help sell more of its products, attract more customers, and better
serve the existing customers.
Whether you're creating a site for the first time or redesigning
a site, you can customize the templates featured in this book to
create nearly any kind of Web site, whether you want a site for
your carpentry business, law firm, photography studio, or nearly
anything else you can imagine promoting online.
In this chapter, you walk through the steps of customizing templates designed to
meet the needs of many small businesses.
Introducing the Business Site Templates
Although every business is different, most good business Web sites have some
things in common: basic information about the business or service, photos, sample
work, contact information, and so on. A testimonials page is another good idea
for any business, such as the one my friend, actor Yuval David, features on his
site, shown in Figure 8-1. By altering the template used in this chapter (shown in
Figure 8-2), you can create a site for your own business with all these features and
a design as professional-looking as Yuval's.
cp
Tasks Performed in
This Chapter
Editing images for
templates
Putting together a busi-
ness home page in
Dreamweaver
Creating other
pages
from a Web template
Using backgro
und
images in Web
designs
y ^0 Part II: Putting the Pages Together
DropBo
Producers, Castinj; Directors, Actors, and more
"Yuval ib an eoiraord n airy d Fled poung
actor. He is indigent. honest, committed
and brave He makes daring choices, and
e«;eculestlierri wte total concertiistion an:i
a mriling absence of Fear He is a ioy to
wortOMitfi and a pleasure to tjehtffl '•'
- Arthur Allan Seidelnian
Di rected Vuual in Hie fi hi "The Awakening
olSpnng"
"YLrvalwas a pleasure fa W&rKWth on die
film and brought sensitivity and passion to
hia character. He is 'wonderful at taki ncj
direction and is committed to bringing
depdi and honesty to his work."
Melora Hardin
w^rted '1*11111 Vuvel es Directori Actor on tie
independent fealire "You"
■Yuval Da\i d oaisi stenny impresses i n
audtions . He's a temlically talented actcr,
always prepared and deeply locused. M
l^whewouHtjeperTectrorire'iagirde
I cast him in The director, writer and
prwtfieerp agr&sd. He was gnsa m die ^_
role and a deligtt to work wi Ih. He brought
incredible deptti and sweet vulnerability to tne charier
Getting to know him, I see how passionate he is aboii hi s craft and career. He has the talent and drrre to go Far i n tins
business. AJ| who wnjrK with him come to see this too t would be a pleasure to wiort( with ri m acjai n "
- Angela Campols-Sanders
Casting Director
Figure 8-1 : By simply replacing the banner image and adding a photo with a frame, I've customized
this template to create this page on www.yuvaldavid.com.
■ GI< Edit Uitw tout Modify Form* Comirartt* Stt Wnlw Help ■ * A | MSKHK -
9 X
■ ■■ -
...Iff! h™ to?. f?p. K«i ,1™ I™ pk I™ B T; h
About Us
Lorern ipeum Odor sit aniet. conaectetueradlplsclnrj elt FYaesefttallqusrn.justo
ccnvalis luctus rutrum , erat rnila farmartum dam, at nonummy quam anteac
quam. Maecenas urna puiis.fermentLrn id.moleetie in, commodo porttitor.feis.
Ham Hand! quam utlacus. Quisque ornore risus quisligula. Phasellus tristique
puus a sugue condirnentim adipiacirg. Aenaan sagittis. Etiamleo pede , i-honcus
■yenenatis, tristique i n, vulputate at, odio. Donee et ipsum et sapian vehicda
roiumrny. Suspendisse potenti . Fuace wsrius uma id cjjam. Serf neque mi , vianus
eget.flncldLrrtnK, susclplt Id, libera, ineget purus. VeettbUun ut nisi. Dense eu
ni sad turpi s reugiat feugiat hleger lupis arcu, pelertesque eget. cursus et.
Termertumul.saplen. FUecs metus rm, extend SQllcltudn.molestle Id, value at.
Si MIIEMIMre
PfcntnilKTilO)
ID> WiCHti
W 3-35
-■II"
I
UK
Figure 8-2: This template can be altered to create a site for many kinds of businesses
or professionals.
Chapter 8: Creating a Business Web Site
DropBo
By altering the names of the sections in this template, you can quickly create a simi-
lar Web site that fits the needs of your Web project, and you can use the template
to create new pages and build a bigger Web site, like I did for my friend's acting
sitej which includes videos, photo galleries, and other special sections. (You can
all the templates featured in this book from the companion Web site at
talFamily . com/diy.)
The Business Template, included with this chapter, comprises the following files:
images: All your template image files are in this folder, in TIFF format. These
image files include layers, which makes it easy to edit them in a program like
Photoshop or Photoshop Elements. You also find in this folder optimized JPEG
files that you can use if you want to practice as you go through these tasks.
(You learn more about resizing and optimizing your own images for the Web in
Chapter 5.)
^ index . html: The main page of any Web site should be named index. You can
alter the basic template design to use multiple images or to include more text,
but it's always good to include a clear description of what your site is about on
the home page.
W about . html: This is a good place to include a description of your business,
your biography, or other background information. A larger business can
expand this into a series of pages that make up a Who We Are section for staff,
executives, board of directors, and so on.
\^ news . html: The news or press section can feature your latest activities. You
can even link to a blog. You find out how to set up a blog in Chapter 11.
work . html: This section can include videos, case studies, articles you've writ-
ten, or other samples of your work.
^ gallery.html: List additional information or create a new section of your
site, such as a listing of products, services, or photos.
^ contact . html: Making it easy for customers to reach you is always good, but
be careful about giving away too much information on your Web site. If you
work at home, for example, you may want to leave off your street address and
just include an e-mail address on your contact page. Figure 8-3 shows a contact
page.
You also find subfolders in this Business template. The images folder contains the
starter image for the banner for this site and is a good place for you to save any
new images you want to add to the site. You also find the Templates folder, which
is where Dreamweaver saves the Template file that goes with these page designs.
(Flip to Chapter 6 for a refresher on Dreamweaver template files.)
If you want to rename any of the files or folders in this template site, be sure to do so
in the Dreamweaver Files panel to ensure that Dreamweaver automatically adjusts
the links that correspond to the files. You can add pages to the Business template
site by following the instructions in the section "Creating and Editing Pages with a
Web Template in Dreamweaver," later in this chapter.
y Part II: Putting the Pages Together
DropBo d
Th* oHH J ttti Eiu of Actor vtwd DiMd. Copyright 20Crj. All rights ratrvid.
Figure 8-3: You can change these template pages a little or a lotto create more dramatic pages,
such as this contact page with a long background image.
Chapter 8: Creating a Business Web Site J ^0
Dro
Editing and Sizing Images for the Template
\J — Stuff i/ou —
Need to Know
Toolbox:
Photoshop Elements
w The starter images
Banner- Template .
tif and FrontPage-
Template . tif,
located in the images
folder in the Business
template from this book's
companion Web site
(www. Digital
Family . com/diy)
Your own text and
images, to personalize
the designs
Time needed:
About an hour
I generally start my design work in a program like Photoshop and rec-
ommend you prepare at least some of your images in a program like
Photoshop or Photoshop Elements before you start working on the tem-
plates in Dreamweaver.
To help you get your images ready for this business site, I included
three starter images: one for the banner, one that can serve as a photo
frame, and one for the home page. These graphics files are composed of
different layers, each containing a separate element in the design, so
you can change the text, colors, and even add more photos. I've included
all the starter images in the images folder so all you have to do is add
your own text and photos.
In this task, I use Photoshop Elements to transform the starter images
into the images for the actor site, but you can follow these same steps
in whatever program you prefer (or have handy), including Photoshop,
Photoshop Elements, or Fireworks. After you prepare each image, you
use the Save for Web option to optimize them for the Web. (You find
more about creating and optimizing images for the Web in Chapter 5.)
7. Launch a graphics program,
such as Photoshop or
Photoshop Elements (shown
here); choose FileOOpen;
and open the file named
Banner-Template . tif.
Part II: Putting the Pages Together
2. You can copy and paste images into
this template by choosing FileO
Open and selecting any image from
your hard drive. In this example,
I opened a photo of Yuval, which I
want to use in the banner at the top
of his page. To copy an image into
the template, first choose SelectO
All to select the image and then
choose FileOCopy to copy it. Click
anywhere on the template image
to make it active in the workspace.
(If the template image is hidden by
the new image, choose WindowO
Banner-Template.tif to bring the
template to the front of the work-
space before you paste.) Choose
FileOPaste to insert the new image
into the template.
3- After you paste an image, like this photo, you can click
anywhere within the image and drag to adjust its place-
ment. You can also click and drag a corner to adjust the
size of the image. And here's an advanced Photoshop tip
(that also works in Elements): If you hold your cursor
just outside the corner of an image, the arrow becomes
curved like the one in this figure, indicating that you can
rotate the image, to set it off at an angle, as I've done to
position this photo in its frame. You can also rotate an
image by choosing EditOTransformORotate.
If the image you're adding to a template is significantly larger than the template file, resize the new image
before you copy and paste it into the template image. The image size for each image is displayed in the tem-
plate. You can change the resolution and dimensions of an image by choosing ImageOSize and adjusting the
settings. You can make minor changes to the size of an image by clicking and dragging any corner of an image
after it's inserted into the template image. (You can find more detailed instructions for resizing and optimizing
images in Chapter 5.)
Chapter 8: Creating a Business Web Site 7 0 7
4.
To edit the text, select the Text tool
from the Toolbox. Then click and
drag to select the text and type to
lace itU^e tiie^options at the top
change the font,
is example,
I clicked the color well at the top of
the page to change the text color.
Tip: To reposition text on the page,
click to select the Move tool from
the Toolbox. (In Photoshop, the
Move tool is represented by the
double-headed crossed arrow icon
at the top of the Toolbox.) Then
click and drag any section of text.
■,1 I —- ■ ■ ■
Fife Eflk Iragt EWvsnot It/u Sdttt Fltef Mr* Wine*)
Yuval Davi
•iiuu Vi iVl^ Ki fu kJa h I fUi pjhp.
W Tic rjHfltrjtsrttH dim hfrYliMtc rtlbck^Mifl htannc
£ Yu va 1
c
|: Yu va 1
c
■ ■
*,H<
■ ■ l-i
0
- Diva
fl...r.- I|l ^ t|
5. When you're done customizing the
banner image for your Web page,
choose FileOSave for Web and use
the settings to optimize the image.
In this case, because the banner
includes a photo, I'm saving it as a
JPEG. (You find more about the
options for optimizing images in
Chapter 5.)
Part II: Putting the Pages Together
|K) - Sinn In Crista NlwAdt&P IP
Ht Edit Haflt Enhinn Luw Stfert Filter Wrw Window hfeb
■ mm run Tnpfini inn rum nrni
6, You can insert images of many
different sizes into the templates
in this business site and align
them to the left or right so that
text can wrap around them. To
dress up your images, you can
use a background as a frame. I've
included a starter image called
Photo-Frame-Template . tif
in the images folder for you.
photD-frame-yuvalnf
7. Because this site is for an actor, I thought it would be
fun to use a frame around the photos that makes
them look like they're stills in a film strip. I start by
adding the filmstrip image to serve as the
background.
66.67% 6 inches x 7.806 inches (72 ppi)
Chapter 8: Creating a Business Web Site J 0^
8. When you layer images like this, make sure
the right image is on top in the Layers panel,
bqcause that controls how the final image
this case, I need to make sure the
rageNnth the photo is above the back-
ground image with the filmstrip.
LAYERS
9.
With a photo like this positioned above a
background image, like this filmstrip, you
can use the Move tool to click and drag the
image into position, change the size, and
adjust the alignment until you get it framed
just the way you want it.
10. When you have everything set
the way you want it, choose
FileOSave for Web to optimize
the image as a JPEG or PNG file.
(You find more about the
options for optimizing images in
Chapter 5.)
Save FwWefc
□
Sm «■■ |M|MI • • Dip
*K | V n»n*i.i-. ........,.-»••>• -.-
OK
'I
/ K)(x ' >art "■ P utt ' n 9 the Pages Together
11.
You can create images as large as
you want. Just beware that the
more you put on a Web page, the
er it takef to download. If
^I^J fXc'^te a P a § e like
homepage aeSign my friend
Davi Cheng created for Yuval's
acting site, you need to limit what
else you put on the page. If you're
going to use a large image on a
page, that's probably all you should
put on that page. In this case, I
created one, big layered image by
copying in each image (and crop-
ping out the main photo).
'An Inige tnhinct Iw 5H«ct rtttr w«
• - tfl Vot»L>K*«M* «.m fciMl Or^ »Ofc»1 •
T %
• * X
Yuval
In - . - »- ■.iy'
Smra-Fo* Web
ft** -m kup i hdudt I ■ -s WU pi it .
.-
■:->:J
- JL/- -
Yuval David
4-
J rj .W, V%.l M
r
Yuval David
Wk-kJ M |.Vi .'j-rm l">iv*J
■Tlt'-DTft* 4[1>^1 tiki Wife
>mn|]bKiv
SHOW!
71 i.^pHvl H-f-L
I — IW f » —
H*: (SI frJi J*
in
■■ 9 .-
7 2. Even large, layered images like
this one can be optimized for
the Web so that they load fairly
quickly. Because this is the only
image I'm placing on the home
page of his site, it should load
quickly at only 84K in size.
When you use the Save for Web dialog box, you create a copy of the image in its new, optimized format. As a
result, after you close the Save for Web dialog box, the original image remains open and unchanged in
Photoshop Elements.
Chapter 8: Creating a Business Web Site
Putting the Pages Together in Dreamweaver
\J — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Dreamweaver
The Business template
(from this book's com-
panion site at www.
DigitalFamily .
com/diy)
Text and other materials
to customize the site
v 0 Images you've resized
and optimized in a pro-
gram such as Photoshop
Elements, covered in the
previous task
Time needed:
About half a day
In this task, you set up a new Web site using the Business template and
start customizing the pages.
As you work through the following steps, remember that you can alter
this template a little (by simply adding your own text and images) or a
lot (by changing the colors, font options, and other style settings) to
make the design more your own. Also notice that by using a large photo
on the home page and a smaller, banner photo on the inside pages, I
can create a very different look for the home page with the same tem-
plate I use for the inside pages.
Site Definition for Business Site Template
Basic | Advanced
Category
Local Info
Local Info
Remote Info
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Site name: Business Site Templa
Local root folder: C:\Users\Artesian Media PC\Documents\DIY Web i Q
Default images folder: C:\Users\Artesian Media PC\Documents\DIY Web i ^
Links relative to: a Document ■ Site root
HTTP address: http://
This address is used for site relative links, and for
the Link Checker to detect HTTP links that refer to
your own site
Case-sensitive links: □ Use case-sensitive link checking
Cache: [7] Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
OK
Cancel
Help
7. In Dreamweaver, choose SiteONew Site. In the Site Definition dialog box, click the
Advanced tab. In the Site Name text box, type a name for your site. In this exam-
ple, I entered Business Site Template. Click the Browse icon next to the Local
Root Folder text box and locate on your hard drive the folder that contains the
Business template files. (Note: You can rename the folder.) Click the Browse icon
next to the Default Images folder field and select the Images folder in the Business
template folder. Then click OK. If you haven't yet selected the Enable Cache
option, a message box appears, asking whether you want to create a cache for the
site. Click Yes to speed up some of the Dreamweaver display features. (For more
detailed instructions on the site setup process, see Chapter 6.)
Part II: Putting the Pages Together
the site setup
process, the files and folders in the
template are displayed in the Files
panel in Dreamweaver, at the side
of the workspace. Double-click
the index . html file in the Files
panel to open the home page in
Dreamweaver.
hfeKltal x
t
IU Fill Edit Wiw built Modify FDrraat Camrrnrdi Hte WWow Mdp ■ < O » A WSKWt -
|4»> [*i - •
0
i
#H> K 115)
Welcome
Lorem ipsum ddor Bit amet.consedBtuer adipiscirg sit Fraesert aliquam, jjfifco can/all b ludus nitnin
at nonunmy quarn ants ac quam Maecenas uma puus, faririenlLrin id, nndestia in, oommodo porttitar, f
Iqcle. CMsque cmare rlsus quis iigula FtiaselUs distlque purus a augue csondlrifiertinTiaaplEdng.Asni
pada, rhonciE venenatis, triaique i n . \upjlale at. adia. Donee el ipsun et Espen vemcUa nonunmy. Si
van us uma I d quarin. Sed ne<fj& ml , valus eget. tmclduirt nec. Eusdplt Id. Itwro . In egst puns Vestlbul
turps feuaial feuqial Integer lirpis arcu. pelarteaqua eget, cursus at, f ermentun ut, sapien Fusee men
moieEtie id, vanus et, nibh Donee nec litxro.
Hi Level hrfldina
-m:k-k ik,
| <^ HTM. | Fnmrt [
Common *
\ Hypilbir
13 ErrdUrfc
Jt. ruovd Anchor
S3 HUarUHifc
sir
r " rat*
Q JissrtDhTBj
(T) Coowm
Wl. MU» H I K
(Of
I Mm T«TH
St o I 6 o v ib @ | ™
O 3tB -Mud HnTtmbtB (Cftjisan
£ l^ Tii^di
"~ 1 ALBrau-Brew-T-mfdili
^ 4w*.hbll
|_ iii'iT iiiiirrd
■ ~ o±i f.lmol
■_ to&a.tbi
— ^ rn«f,l*ri
™ W0+ HjrJ
Title:
Official Site of
Actor Yuval Dav JJft, ^
6
00
1450 1500
|5| Do lenient Title
3. At the top of the home page, you can change the page
title, as I'm doing here, by replacing the text in the Title
field. Enter your name or business name or a brief
description to identify your site, such as I did in this
example, with the words Official Site of Actor Yuval
David. The page title is the text that appears in the title
bar at the top of the browser window when someone
views a page online; this text is saved in a list of sites if
someone bookmarks the page.
4- You can replace any of the image
placeholders with images you pre-
pared for your site. To insert an
image, double-click any image, such
as the banner at the top to open the
Select Image Source dialog box.
Navigate on your hard drive to find
the image you want to insert and
then double-click the image file-
name to select it. As you see in this
example, I'm inserting the home
page image I created and optimized
in the previous task. If the image
you select isn't already located in
your root site, Dreamweaver offers
to copy the file into the root folder
after you select it.
Ut (t' WM ' -' •'■ " torn** Corwntnth
Htlp
1SS-
hi*-: ttti * ^
PI i 'imtrl^nrJ ^ r *"
■ P.- ! '' r ~~T
00. 4a
tt5 CT
TTi
I
V
i
Bti on tiii r»
&j *» MW<»MIS
HVIoome
Lorem ipsum^or atamet, consectetuer
at nonumirry quam ante at quam Maacer
hpew. Q jsqus cfnar* nsus qus hgiia.Pti
pede, rtwicus wnefials, tnatique in, vulpi
rat lie irna id quan. S«d neque m. vanu;
turps feugiatfeugial Weger tirpis arcu, p
molesbe id. vanus et, nth Dorwc rr?: Ib<
Ha le>ve>l heading
Lorum ipsum cWor sit amot, consectetuer
atnonumnryquam anteacquam tls^cer
'lirfr.lj-iw
»• Sated friajB
sa
1
Loot n I iM(pi
5K
■-•-•-=1
I F3 I ■
VUvjIOwd
170ib»,iPEij.32F./M
LM)Mrt Hon
rtsnitjcf InageFikil'al
r*wf».yc».
h m
Ufc nl^J-im
URL l4f l l l 'IlV>i««tiiBiN«liPU>nra<lu
Chapter 8: Creating a Business Web Site J 0 *J
5.
Th e way this template is made, the
ewttlds *e*fit images of
width should
not exceed the overall width of
this design, which is set to 970
pixels wide. Because this home
page is just one big image, it's one
of the easiest pages to create in
Dreamweaver. Simply delete any
text you don't want in the template
and save the page. (Remember, the
home page should always be
named index.html.)
Source Code
.,>! Code
Template, ess
Split
l :
3 ;
3 ;
, jij Design j*| Live View ▼ Title: Web Site
fit
ffl 50 100 , 150 , 1200 , 250 , 300 ,
I I | | I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I
350 .
1 1 1 1 1 1 1 1 1
400 ,
1 1 1 1 1 1 1 1
450 , T500 , |550
1 1 1 1 1 i 1 1 1 1 1 1 1 1 1 1 1 1 1
7W ' "■
Yu\
Welcome|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, jus
at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestk
lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condi
pede, rhoncus venenatis, tristique in, vulputate at, odio. Donee et ipsum et sapi
varius urna id quam. Sed neque mi.varius eget, tinciduntnec, suscipitid, liberc
turpis feugiatfeugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentu
molestie id, varius et, nibh. Donee nec libero.
6. On the rest of the pages in this site, I use
a smaller banner image at the top of the
template to leave room for text and images
I want to include on these pages. This tem-
plate is set up to let you use a different
banner on each page, which enabled me to
use different photos of Yuval throughout the
site, but you can use just one banner if you
prefer.
The links in all the pages in this Business template can be changed only in the template file used to create these
pages. That makes it possible to set the main links on all the pages at once, as you do in the next task.
Part II: Putting the Pages Together
him I '■ " fonr«rt CttWi
*ns va nn bt rn en ns p<
SkS Yuval D
Biography of Actor Yuval David
VJtietrri he it, [irfTmriny 5n?tf»^r film i Revision ^q^rlenrlng Vn,al [*m 15 i-»rrf» *i1lii*ry
A soulTii performer wl&i depth beyond hisaoe. Vuval 15 a strong acw Directors and castirxj d rectors hi
ccmp^ling and varied performances in both comec^ and drama They often compare n 5 talent style an
Kevin Kine.Rcdn wwems. and Kevin Spacer Ytvai is desoreJto achieve the 'It Doy" heeflttifQD stati
such as Jake Gyllenhaal. Elijah Wood and Orlando Bbom| J
But vuval is unique His characters shine trom a >3epth of personality, charm and talent h ficfify motivat
weaves togeTher his mind, body aid soul alcMfig ris characterizations to rush forth in a gufh of eneirjy
show subtle nuance and bold emotion
-^•IV . I , t . . . J . . ..tl, . J ..H.I. .
_l '
„•„:., ^ * —
«^* IB* 5?
.. .ill- 1.-.
K L_) nagv*
11. O VyAuMi
I- a !« film,
If £3 V fW>Ual»
■• i_i Mail
aotacLhcrri
p*s*» Hrt
extos tv,
•.<■/!«
t lot il Items ialcctot
7. You can add text by typing it
into any part of the page, but
be careful not to delete the
formatting when you delete
the Latin (Lorem ipsum) text,
which is included as filler in
the template. If you have
trouble adding text without
altering the format, use Undo
(Ctrl+Z on Windows, or §§+Z
on Mac) to back up a step
and try again, making sure to
select just what you want to
replace on the page.
S»« You can insert images anywhere in
the main area of the template by
clicking to place your cursor where
you want the image to appear and
then choosing InsertOlmage. You
can align images to the left or right
of a page and wrap text by using
the class styles, float-left and float-
right, included with this template.
First click to select the image; then
use the Class drop-down list in the
Property Inspector to select the
alignment option you want for your
image.
«&< --;Spit J fair I
TT±
J Quotes from Producers, Casting Directors, Actors, and more**.
■
I LP"T ] V
^tXi
rjtfc- QunHei about r'uvi [
\m
pa;' \W
si Bis. ffi
u
"Y ijvad 1; zn extraordinarily gifted
pcung actor. He is iutsttigeot, bcaieatj
cwumitBd and biawe. JEa makes
dating duoices sod executes thfiLniwth.
total CHUceiitratKti and a ihrikg
at-rencE (jffcar. He ii a jo? to wort
with iin.'d a pkasvre Co behold. "
- Arthur AlLan Setdilman
Drrcrfed Tumi in tbr Sbn "The
Awaketung of Sprirg"
3*t
' Ymrau a pit asure- tc- work Wth
■oti the flm and ferment saiEtthrity and
P3EsLon t<? ris rkaiac-ICT He is
wonderful at taking direction and is
coimnthed to bnqgmg depth acid
tiMiesry to his wak "
- Melara. Hatdin.
M ■:
auat-lcft
Buat-
MernJaKfelih*
HmLflnrHorecnld
N b>J] a- ItemHov a
HenJla'ltcrrtE.
H inufl or 1 wnS ubmsn u
N toa tw Items ubdnen uH nvet
*\ i.L : . iJi'i:! . jL r
a
ilrtrri- irnrntjnjlaric^edtsbfe^ ^iv^noT^rtwit'i' <Jv-ft[FyM> 4*jckiuoto>- <n> ktra.Fbnt-rrJitH
rKtirmni*,
] !^ Henarrir...
W 3Jo
ID
H 5fc'
at Ta crsffrjne-daiLe.Jpq j & b"^ dt 'ftwd Drci±.Dfl-nr>; » Oaas ftdat-ri... ^[
trill~ Edit a ^
JtuconnttrrF-cO
0
Chapter 8: Creating a Business Web Site
9.
To change the text size or color in
these templates, you need to edit
the style that controls the ele-
nts. To d| so, open the CSS
iSjfnall^iGiiot open
ea^tfy) TJy choJfefng WindowO
CSS Styles. In this template, to
change the style of the headlines,
you need to change the corre-
sponding styles I've defined for
Heading tags 1 and 2. The hi is the
largest heading style; h2 provides a
second-level heading. To change
the Heading 1 style, double-click
the hi option in the CSS Styles
panel, and change the text settings
in the CSS Rule Definition dialog
box. Click OK when you're done
to return to the Dreamweaver
workspace.
CSS Rule Definition for M in content. ess
Category Type
EM
Background
Block
Box
Border
List
Positioning
Extensions
Font-family: Georgia; "Times New Roman", Times, serif
Font-style:
Line-height:
large ▼
px ▼
Text-decoration: □underline
O overline
Z] line-through
□ blink
□ none
Font- weight: bold
Font-variant: ▼
Text-transform: »
Color: P| #0013"
Help
OK
Cancel
Apply
CSSSTVIES AP
E1EMENTS |
All
Current
All Rules
— .smtxt
— .xsmtxt
— .float-right
— .float-left
-hi
-h2
— ,25-bottom
< H ' "
Properties for "hi
color
font-family
font-size
font-weight
Add Property
□
■ #00 IBS 7
Georgia, "Times New Ro...
large
bold
CSS STYLES
[ AF El
EMENTS
All
Current
All Rules
— /container
— #DemoContainer
— #mainContent
— #MainRight
— #InsideContainer
— #InsideContent
— #header
□
rrr
Properties: for "^container
color
[J #242542
margin-bottom
10px
margin-left
auto
margin-right
auto
margin-top
0
padding
Opx
text-align
left
width
px
Add Property
— 1
:iz *i±
MainContent
IT
iography of Actor Yuval David
Whether he is performing on stage, film or television,
experiencing Yuval David is extraordinary.
A soulful performer with depth beyond his age, Yuval is a strong
actor. Direc ^ o r n ^™ H ™^n g directors have commented on his
compelling > Paragraph formances in both comedy and
™l - e his talent, style and intrigue to Meryl
iWilli^mc anrl Ufos/in Qnarw Yiiv^Ijq
drama. The*
Heading 2
Heading 3
Heading 4
nr
<bo dy> <div Heading 5
Heading 6
— Preformatted
stance : editable > <div#mainContent> 1^1^ Q>
*OPERTIES
> HTML
Format
L CSS
ID mainContent ▼
Class None
Link
B I
/ 0. To apply the heading styles to text in the
page, select the text and then use the
Format drop-down list in the Property
Inspector to choose a Heading size.
/ 7. To change the layout of the page, you need
to change other styles, such as the width of
the style named #container, which con-
trols the overall width of the page in this
template. You can double-click the name of a
style in the CSS Styles panel to open the style
in the CSS Rule Definition dialog box and edit
it there. Or make changes in the lower half of
the CSS Styles panel as you see in this figure.
J YQ Part II: Putting the Pages Together
; ^C&de ^ja>tt [^iDEcri | ^LhnWlewU Tltlai Me** f iavHM*il Djfrid ^ ^ t ^ t^V fT:£ Check F&os
1 — F>~, — H~; — P 3 ^ — — F 15 ^ — F 5 ^ — I 35 "! — P* - ; — — — — — — — — F 5 " - ; — \^~, — f
■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ m ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ n ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ rn ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i ■ ■ ■ ■ i
N"ewc
tevid is kiowi 1or leertmg a busy schedule perfcrming in theatre, fifri, tslevisicn. and radio. He is a strong and
fersairk acraLwich bun and in eketdmjmedy and i rnprcw. and piaj/s a wids van aiy cf characters , as I s gm dant tiy his
ii
a-rtta r.:c > -ia th > .rA*LL*i Ijfrie i :■ <mmt h : tai ce ! aJ t-^fe: > <j hi * n Bl rrlp rb: rt > <j >.i . certa :■ ^ [■; tug ' > i^J 'h> LDlHh »|ffll;HB+- LB2K|'££g[ LffcmfeflnFfl)
riSJKbKILbi
]D
5<ic ssfuvSr^rtkho.jDg ^fcCia At TwatSvId
/ 2. You can change the layout dra-
matically from page to page
using the same template in a
Web site simply by using images
in different sizes and aligning
them differently on the page. In
this example, I'm adding a big
image with three separate
photos to fill most of the width
of the page.
73. To test your work in a Web
browser, choose FileOPreview in
Browser and select any browser on
your hard drive. For best results,
test your work in a variety of Web
browsers to ensure that your pages'
designs look good for all visitors. In
this figure, the page is displayed in
Internet Explorer. For more instruc-
tions on working with CSS, see
Chapter 6. For instructions on how
to upload your site to a Web server,
see Chapter 10.
— Nuws I r 1 1 -i V.u-hI :. sslrl Vi\ - ili:vra I -1i:ni : 1 1
iQj '. . ■ ^ C?,Ujir(yu*i:i in ktidib FC'.DnwrH r*:',wih nil I 3 -Mljrimil Dmri^uvilwib :ihH '.nr« Jihn-J
"rf Firarttrd j) Unit rr an ViiiX D*M
You can change the width of the page, but I've designed this template to be 970 pixels wide because that size is
a good width if you're designing for a screen resolution of 1 024 x 768, a common resolution on 1 5- and 1 7-inch
monitors, considered the most common in use on the Web today.
Chapter 8: Creating a Business Web Site / 7 /
Creating and Editing Pages With a
(ate in breamWeatfer
stuff you
Need to Know
Toolbox:
j> Adobe Dreamweaver
The Business template
from www. Digital
Family . com/diy
Your own text and
images, to personalize
the pages
Time needed:
About half a day
As described in the previous task, you can add your own images and
text to the pages of the Business template to create a variety of differ-
ent looks for your site. When it comes to editing the main links and
copyright information that appear on every page, however, you need to
change those in the template file itself. Although this requirement may
seem limiting at first, the benefit is that you edit these links in only one
place to update the main navigation links on all the pages in the site.
Dreamweaver templates are designed so that some regions of the page
can be edited in pages created from the template, and other regions can
be edited only in the template itself. The navigation links that appear
above the banner in this template and again at the bottom of the page
with the copyright information can be edited only in the template.
In this task, you make global changes to pages by editing the template
file, and you create new pages from a Dreamweaver Web Template.
Before you can complete this task, you must complete the site setup
process in Dreamweaver, covered at the beginning of the preceding
task.
7. To give you a head start on this Web site
design, the Business template folder has several
pages that are already linked together. You can
edit any of these pages, such as the work . html
page, by simply double-clicking the name in the
Files panel to open it. It's common practice to
include a page on your Web site that showcases
what you do, like you see in this figure, and it's
easy to add images, text, and even video files to
this page that was created from the template.
The official "e^lt? or Actor ruval David. Copyright 2009. All rights reserved.
H > Biography Rosuma Mows View Work Pholo 6allurv Agants & Conlarl
2. If you try to click the links or the copyright
information on the work . html page or any of
the other HTML pages that were created from
this template, your cursor turns into a circle
with a line through it, and you can't make any
changes in the HTML file. To edit this part of
the page, you need to open the template.
Part II: Putting the Pages Together
DropBooks
3- To edit the template itself, double-click the
name in the Files panel. In this Business tem-
plate site, the template is called Business-
Template . dwt and it's in the Templates
folder.
You can edit anything in the tem-
plate file, but you should do it care-
fully so as not to disturb the
formatting and links that surround
the text. For example, to change
the name of a section (at the top or
bottom of the page), click to select
the section of text, such as About
Us, and replace it by typing the text
you want to in its place. In this
example, I changed About Us to
Biography. As you can see in the
Property Inspector at the bottom
of the screen, when the text is
selected, the link is displayed in the
Link field. To change or reset the
link, click the Browse button (it
looks like a little yellow folder) next
to the Link field in the Property
Inspector.
HIES
ASSETS
(r^ft Business Site Tem[ T
Local view ▼
Local Files
B ^ 5ite - Business 5ite Template (C:\User
E]-(&J images
□■■■■(^ Templates
ggf Business-Template. dwt
Ti>|
about.html
contact .html
gallery.html
index.html
news .html
Template, ess
work.html
s 1
5.
0
lAboirt Us
News Work Gallery Contact
n
<body> <div#footer> <div.navbar#navbar> <ul> <li>l<a>
ki^J ^ 100% v 762 x 484 v 9K/2sec Unicode (UTF-8)
[ Page Properties, ■■ ] [ Listl Browse for File ]
Update Template Files
Update all files based on this template?
contact.html
about.html
gallery.html
news.html
work.html
index.html
Update
Don't Update
5- To apply a change in the template to all the
pages created from the template, just save
the template file and Dreamweaver prompts
you with a dialog box that lists all the pages
that will be updated. Click Update to com-
plete the changes.
Chapter 8: Creating a Business Web Site J 73
6.
Changing the text links doesn't alter the file-
names, but you can change those as well by
clicking to select the name of a file in the Files
el and typingto replace the name. Change
/rjafdOTiran*^ only in the Files panel to
sure tMi Dreamweaver updates any links
that go to that page. As you see here, when I
changed the about . html page to bio . html,
Dreamweaver prompted me with another
update dialog box listing all the pages that link
to the about . html page. Remember: Folder
and filenames used in Web sites shouldn't
include spaces or special characters except
the dash (-).
Update Files
Update links in the following hies?
/contact, html
/bio. html
/gallery. html
/news, html
/work, html
/index, html
3
Update
Don't Update
Help
ASSETS
Q Business Site Tem[ ▼
Local view »
C 0 0 * ft @ 3
Local Files
0 O Site - Business Site Template (C:\User:
EE l£l images
B Q Templates
Business-Template. dwt
^_ bio. html
^ contact.html
^ gallery.html
~* index.html
New Document
Blank Page
— ^jp Blank Template
Page from Template
Page from Sample
Other
Site:
i±, Artesian Media 4-09
A Austin Massage
Authors Unconferece
■ft. Backgrounds
ji, Business Site Templat
& California Wildlife Pho
rAi ChocolateGameRules
& Davi Design Studio
A David LaFontaine
& DigitalFamily 1-09
Eclectic Film Sales
A Experimental Musical '.
& Fallow Deer
& Family Web Site Temp
Flamingos
^ Frank Vera
■ft, Jasper Johal Photogr;
& X Warner
i£i Jenny Hontz
& Joomla sandbox
&. Karen Warrl
Help
Preferences.
Template for Site "Business Site Template"
Business-Template
Get more content.
Content
NftiyvTW* r»JTi .¥*.»' J.in U>> »T»CUV^'»«T**»« »!.'*»•)»*■«.
IBM -ir;**cn*6risut g»i tguU PTttfaAii trtl (in 6*4jm u<kr»<jr>«liid
[«e* rt»:i* nntta llUfan * ■>! c Oarw « »«iit >*tKrii »J
"OHlB »t#* .1 >»t. >jr».>*r». 1 #l,;.j*.lf...v*n- .1 ^ ..•J»fV ; J
netoiM U 'mxm H iM Dome Mc lt*n
ii j imj bnitai
win-* mm »m»tii iui Mmra Biapuut. MtMititl r*Mit\ m ia mlJ
kXM. ■>»'»*'aMft»f>ii»i Qjii hp* Pr«tAnr*jr»* [«n<t * ■> •>* r44rrMrnMP1
DocType:
XHTML 1.0 Transitional
[7] Update page when template changes
Create
Cancel
To add a new page to this Web
site by using the template,
choose FileONew. Then, in the
New Document dialog box,
choose Page from Template
(from the options on the left),
make sure that the Web site
you're working on is selected in
the middle column, and choose
Business-Template from the
right column. (Notice that a pre-
view of the selected template is
displayed on the far right side of
this dialog box.) Click Create to
generate a page from the
template.
5. Before you do anything else, always save the new
page by choosing FileOSave and name the page as
you save it. I named this page videos . html. You
can then change the page title (the text that appears
in the title bar of a Web browser window) by click-
ing to select the text at the top of the workspace
and typing in any title you choose. In this case,
I entered Actor Yuval David's Videos.
Business-Template .dwt*
videos .html* x
tie: Actor Yuval David's Videos"
400
450
500
Document Tit
News
Work
Gallery
J y Part II: Putting the Pages Together
Drop Books,
iges created
from this template, you can replace
the text and image placeholders
with your own text, images, and
even multimedia files. In this exam-
ple, I've added code from the
Vimeo video hosting service to
insert a video into this page. You
find out more about how to use
video services, such as YouTube
and Vimeo, in Chapter 13.
bio .html x quotes.html x contact.html x index.html x work.html* x actor-reel.html x videos html* x
DavidWuval web siteWideos html
Source C
content. css content. ess SpryMenuBar.js SpryMenuBarHorizontal.css
,;|Code
^ Split J) Design _fj Live View I ▼
Title: Demo Reel: Actor Yuval David JJ,t)„
<hl>Actor -Reel : -Clips -From • -Yuval -David T s -Recent • •Roles</hl>1 *
<p>l
<object -width="500" -height=" 367">
<param •name="allowfullscreen" -value="t rue" ■/>
<param -name=" allowscriptaccess" -value=" always" •/>
<param ■name= ,1 movie n -value=
"http://vim.eo . com/moogaloop . swf ?clip_id=6421750& setrver=vi
meo . com& show tit le=0& show byline=0& amp; show portrait=
200 [250 [301 |350 [400 [450 [500 rSSO"" 1561 |650 |700i~ |750~~ |80b~~ |850~~ |900"~ |«
I I ' 1 1 1 ' ' ' ■ I ' ■ ' ' ' ' ' ' ' I ' ' ' ' ' ' ' ' ' I ' ' ' ' ' ' ' ' ' I ' ' ■ ' ' ' ' ' ■ I ' ■ ' ' ' ' ' ' ' ' ' ' ■ ' ' ' ■ ■ ' I ' ' ' ' ' ' ' ■ ■ I ■ ' ■ ' ' ' ■ ' ' I ' ■ ' ' ' ' ' ' ' I ' ■ >■• ' ' ' ■ ' I ' ' ' ' ' ■ ' ' ■ I ' ' ' ' ' ' ' ' ' I ■ ■ 1 1 1 1 1 1 1 1 1 1 1 1 1 i hi I 1 1
Actor Reel: Clips From Yuval David's Recent Roles
iody> <mmtinstance: editable > <div#DemoContainer> <div#MainRiqht> <p>l<obiect>|
100%v^l 762 x 349 v 4fJK/6sec Unicode (UTF-8)
PROPERTIES
ActiveX
W
500
ClassID
H
367
Embed
J Src
)ADEF&fullscreen=l
Align Default
Class None
Vicrihc II- hi "«MtiH! Act:r<ftivj1 IMv.i Vsi
NiFnfnx
fjli jjr*- history iDckmirkr Jpdi tttlp
fiilrtnd lints
*al fnHui* firicr Y™l .
A mi I H,
Yuval David
I taBwhB would be pBrfKttDrLfiB \eat
role I carthln n. The rJ re ctrjr, witter
and producers ngrecd . l-fe wran greit
ni ine role and a dEHgl* to work *tn.
He la-outfit Incredbla Uaptn End
aneEt whs ajilr.,. no ine craracter.
GstBra to know him, I bbs how
pmalnrrate he 15 about hij cr?fl jnrj
career He has Ihe talent and rtwe ta
Yuval David piayi Geoiqe on "Days of Our Lives'
I
10. To play multimedia, such as this
video file, you need to preview
your page in a Web browser by
choosing FileOPreview in Browser
and selecting a Web browser,
such as Firefox. With a page open
in a browser, you can click the
links to test your work and play
videos and other multimedia files.
Many Web browsers don't display Dreamweaver Web Templates well, so if you try to preview the . dwt tem-
plate page, you may get an error message. To test any changes you make to a template, open one of the pages
created from the template and then preview that page in a browser and test the links and other features.
Chapter 8: Creating a Business Web Site J 75
Using Background Images in Page Layouts
\J — Stuff i/ou —
Need to Know
Toolbox:
j> Adobe Dreamweaver
w The Background tem-
plate from www.
DigitalFamily .
com/diy
Your own text and
images, to personalize
the pages
Time needed:
About half a day
Whether you're working with one of the templates included in this book
or you want to dress up a page you create with your own custom
design, using background images can provide a great short cut to creat-
ing a distinct, professional-looking site — even if you're not a profes-
sional designer.
The best part about this trick is that you can find so much great art-
work on stock image sites like www. istockphoto . com, where I got the
filmstrip background image for the site. Web sites like iStockphoto.com
license the rights to images, often with some restrictions. For example,
for a few dollars, I bought the right to use this background image in a
Web site and even feature images of that Web site in this book. If you
want to use this image, or another image from iStockphoto.com, you
have to buy the rights to the image for your own site. The good news is
that you can choose from millions of photographs and illustrations on
stock image sites and the licensing fee is a small price to pay for the
professional look you get from a well-designed background. With a little
creativity, you can create your own background images in a program
like Photoshop or Photoshop Elements (see Chapter 5 for more on cre-
ating your own images).
fi H*tfaliyt*a tfTKtfknaflsc I "Film Reel"! IS»ckDlwa«itt .wHiHw&m* i hi
jjjjil 1 . J r 1 0 i '^niwwiM.litBikFftotatCHiviiiutaicitiihp ?-snJon-EKW
£t rmirtter g$ Vnf&y fat tfxnV imsfl^ | "Fikt> Pit!" | iStonkpti..
7. Stock image Web sites, like www .
istockphoto . com shown here,
offer rights to photographs, illus-
trations, flash videos, and anima-
tions. You can search among many
different keywords and when you
find an image, you simply click to
download. Most reputable sites
that offer good quality images do
charge for the service, but sites like
iStockphoto offer images for as
little as $1 each.
iStockphoto
When you're designing for the Web, you don't usually need a big, high-resolution image (the higher the resolu-
tion, they more expensive it is), but you do need to make sure you get a big enough version that it will fill the
entire background of your page. Because most designers are creating sites for a 1 024 x 768 monitor these days,
the image should be at least 1024 pixels wide. You can always reduce the size of an image, but enlarging it can
lead to a loss of quality.
Part II: Putting the Pages Together
2.
After you've created or downloaded
an image to serve as the back-
ground of your Web page, you can
bine it with other images and
rii Jrral^iG^e Photoshop
merftsT^owrrtrere. In this exam-
ple, by placing the big image behind
the text I was able to create a lay-
ered effect. You should edit and
resize your background image and
then use the Save for Web dialog
box to save an optimized version
for your Web site.
Sol Slavin
sol@solslavin.com
Portfolio of Projects
About Sol
3- You can add any image to the background
of the entire page by choosing
ModifyOPage Properties and using the
Browse button next to the Background
Image field to select the image.
Insert Modify Format Commands Site Window Help
DESIGNER
>
■esii
Lll
Page Properties
Category Appearance (CSS)
Appearance (CSS
Appearance (HTML)
Links (CSS)
Headings (CSS)
Title/Encoding
Tracing Image
Page font: Default Font
" B I
Size:
px '
Text color:
Background color: p #723A18
Background image: images/background|jpg
Browse..
Repeat: no-repeat
Left margin: 0
0
px ▼
0
px ▼
Right margin: 0
0
px ▼
0
px ▼
Help
1
OK
Cancel
Apply
22 fit I-*.* Utw kit* Mi " (omvA Cc.v,T, <n d, Sfe Wndom Help ■• O » A «SKN(R » \P
I lit'.
rani
....
;<■ _ y.
iii pa Pf!
If:
i
M . Wff*
Sol Slavin
sol0solslavin.com
i □ g • %> • a & a
0« «>• I QB'
avnnt
Ml
CSS Rule defiaitiMi tor •«mMI»ei
I—
ba>*i.o"iJ
h><4*
ut
|.)|,J i.| *sl.<v w
1 Ot 1 1 Oncel 1
cocbmTF-8)
— «azila*w
-MMt
-»bottgm
i a ►
tw-.tarowHwl
r^Jift ujbo
Nfefch
t: .•' 3
J Is is M II Trie
J,
O Bs-Jc<Sfrt»ICW...
Hi O OajNtjnDioy... r
IE O r
4- Another way to use background
images is in the background of a
<div> tag in your page layout. In all
the templates featured in this book,
the designs are centered and they
float on the screen so that they
appear in the middle of the browser
window no matter how big or small
the monitor. If you use one of my
templates, or create your own cen-
tered design like the one featured
in this example, your best bet is to
add the background image to the
main div, in this case the <div>
tag named # container that sur-
rounds all the other content on this
page. To do so, double-click the
#container style in the CSS Styles
panel; in the CSS Rule Definition
dialog box that appears, choose
the Background category and then
click Browse button to the right of
the Background field and select
your desired background image file.
Chapter 8: Creating a Business Web Site / 77
Ij ro 1^1 R^Yf* 1 ! <5sp act ° f your
I Uaai AgJoVjafl ISra^l preview your
1 page in different Web browsers and
try out the design on large and
smalls screens to make sure it dis-
plays well on a variety of comput-
ers. Chapter 10 explains site testing
in more detail.
'49 Sol SJsvia . VWn4owB Irelvrntl f xplori"
13 , • £_ i -3 1:1 n-in con I
it FMitbi g Sal a».|r,
*» X I » '
Sol Slavin
sol@solslavin.com
Portfolio of Projects
About Sol
Contact
Most of my projects were created with friends,
we work together on a level of trust and with the belief that
Sal Slsvi* VWn4ou» ln*c>rn*1 1 xplorn
i> FMitttl 1 0 Sal a».«r.
Sol Slavin
sol@solslavin.com
How I got started In 'the biz'
l^twn working on nim and Meo producers since 197*? when I gotmynrstP.A
job Thai ruling nt spontaneous creoovicy aixi the magical possibility 01 making
mowes Jusi flipped a switch inside of me K
IV*t«M*i hooked ever si nee
Skills
Grip: l have a good track record of collaborating with the D P. arcJ cinematograph
to ach) eve the "loci!" diey want without caua no problems with time or cortftM}
Electric: I understand the chalenges v\jtien it ccmes to etectrical worV. and ha* to n g
It so the cast and crew can do meir jobs wttioui tripping on cables cr getting tried
Do*/- ^goahsati^stoachiev«smooihandseamlessmovessofheDP has a .
smile on his lac* at Ihe end ollhe shot
Can-era i learned ho* tocpefste a jb on a malfunctioning Chatman P«*\*w, *t*cji
taught me the importance of pre-visualiiing a shot so I could make it happen in my
h=od before I had to make it happen yi th my body
6. After you've set up a background
image for one page, it's easy to use
the same design for any or all of
the other pages in your site as well.
When you add an image to the
background of the page, you can
add other images, text, or even
multimedia files above the back-
ground to create a layered effect
that can create a rich, full design
effect.
Part II: Putting the Pages Together
DropBooks
Chapter 9
DropBoo&eating a Family, Vacation,
or Hobby Site
There are many excellent reasons to create a Web site, slide
show, or photo gallery. From the announcement of a new
baby to sharing the latest vacation snapshots to coordinating the
games for your little league team, digital designs are a great way to
keep in touch with family and friends.
The best family sites include room for everyone in the clan, and
as you see in the sample family site-creation tasks in this chap-
ter, you can easily adapt this design to create sections for each
member of your family, club, or organization.
Getting Started With the Family or
Group Site Templates
The templates featured in this chapter are designed to showcase a lot of images
and would work well for any family Web site, as well as for an art or photo collec-
tion, to illustrate business services or products, or to share vacation photos with
family and friends.
For this site, you can download templates to create the pages in Dreamweaver as
well as starter images designed to be used in an image editor, such as Photoshop,
Photoshop Elements, or Fireworks.
All the templates featured in this book can be downloaded for free from the com-
panion Web site that goes with this book. Just visit www. DigitalFamily . com/
diy and follow the instructions to download the various graphic and Web page
templates.
Tasks Performed in This
Chapter
^Working with the
templates
i> Designing a site for
your family, hobby,
or vacation
Editing image templates
/ 80 Part " : Puttin 9 the Pages Together
DropBoI
As you follow the instructions for creating the family site featured in this chap-
ter, you'll see how to customize pages, as shown in Figure 9-1, and how to add or
remove pages to create smaller or larger versions of this site. You also find instruc-
tion! for creating interactive features in Dreamweaver, including image maps.
stomizing this site involves editing graphics as well as HTML files, you
te tasks for each section of the site:
The first task shows you how to customize the banner, text, and images by
using Photoshop Elements. (I'm using Photoshop Elements 8.) You also find
out how to add and position images to create the page designs for each sec-
tion of the site.
The second task shows you how to set up a site in Dreamweaver and how to
edit the front page.
The third task covers how to edit Dynamic Web Templates in Dreamweaver,
make changes across many pages at once, set links to pages and remove pages
from the design.
r- Ttm Lea F jiJ^f VMn
ui 1 rwnn Enlinr
j • i ~n ii I' I rrr r' I I ii^ii rim? ■ n I
-
THE LOOS FAMILY
Nfnrk
Hlttisa - Mitf EiniL>L«i -Bin Lh1::j - OXO.
Figure 9-1 : The template featured in this chapter can be altered to create a wide range of different
kinds of Web sites, such as sites for small or large families.
Before you get started with these tasks, here's a quick overview of the template and
files used in this chapter. You can download the family template with all these files
from the companion Web site for this book at www. DigitalFamily . com/diy.
To help you get started with this site, and to ensure that the links on the navigation
bars work properly, this template includes starter pages for each of the main sec-
tions of this site. Although you can add or remove pages and change links as nec-
essary, this list describes the files and folders that get you started when you first
open the Family template:
index . html: This is the name of the front page of the Web site. The main
page of any Web site should be named index; the rest of the pages can
be named anything you like, as long as you don't use spaces or special
characters.
Chapter 9: Creating a Family, Vacation, or Hobby Site / $ /
images: You find all starter image files in TIFF format in this folder. You
can create your own banner by editing the text and images in the TIFF file.
You also find optimized JPEG files in the images folder that you can use as
you follow along with the tasks. (You find instructions for editing the TIFF
s and optimizing them in the JPEG format in the first task. You find more
led instructions for editing images in Chapter 5.)
^ ess: You find the external style sheets that are attached to the template files
in this folder.
Templates: In this folder, you find the dynamic Web templates used to create
the files in this site.
\^ pages: This folder stores all the pages for the individuals in your site and
includes these ready-to-use pages:
• mom. html: For a parent
• dad . html: For a parent
• child- 1 .html: For the first child
• child- 2 . html: For the second child
• child- 3 . html: For the third child
• child-4 . html: For the fourth child
• other . html: For anyone else you want to add
You can rename files by using the Dreamweaver Files panel, as you see in the task
"Designing a Web Page for the Entire Family." The Files panel lists all pages in a Web
site; when you make changes in this panel, Dreamweaver automatically adjusts any
corresponding links already set in the Web site template. If you stick to changing
only filenames or folders in the Files panel, you never have to worry about breaking
links.
Getting everyone Working on your Web site
As you consider all the ways you can share
stories and photos with family members
and friends in your own family Web site,
make sure to include your entire family in
the planning-and-development process.
Here are a few ways you can get family
members of all ages involved:
Ask older family members to write about
special occasions and family traditions.
Scan artwork from younger family
members, and include those images on
the site.
Invite the family historian to help create
a family tree and other historical records.
Scan photos from old photo albums
(and don't forget to sort through those
boxes of old photos in your attic and
closets).
Include links to clubs, associations, and
hobby sites to showcase your family's
favorite activities.
w Keep the site updated with photos from
everyone in the family, by sharing an
online photo album at Flickr, Shutterfly,
or the Kodak Gallery. It's simple and free
to share photos on any of these sites, as
I explain in Chapter 7.
Part II: Putting the Pages Together
Editing Starter Image Templates
-Stuff you k -
Need to Knou)
Toolbox:
\* Photoshop Elements
The Home- Page-
Start er- Image .
tif file from the Family
Web Site template (see
the Introduction for
details)
Your own text and
images, to personalize
the template banner
Time needed:
About three
hours
The starter images for this template are designed to showcase images,
so most of the work in creating this site is best done in an image-editing
program, such as Photoshop Elements. The trick is to size and prepare
all images before optimizing them for the Web and putting the pages
together in Dreamweaver. In this task, you find instructions for adding
your own images and text to the starter images included in the Family
template.
This home page starter image has several elements — photos and
text — and these files can be altered in many ways. In the following
steps, I show you how to resize and add a photo and then edit the text
by changing its font size, color, and spacing. After you insert and resize
all images the way you want on your front page, you find instructions
for using the Save for Web feature in Photoshop to optimize your
images and save them as JPEGs so they're ready to insert into the
template files in Dreamweaver.
Add Photo
225 by )2Sp«els
Our Family
/. Launch a graphics program, such
as Photoshop Elements (shown in
the figure), choose FileOOpen, and
open the template graphic file
Home-Page-Starter-Image .
tif.
Add Photo
130x125 px
Add Phoin
I30xl25px
Second
"Name
Add Photo
33© x 425 px
Ail photos ihouid tx Mitvd
i/iCy 2 ppi wsaiutioa
You can edit the image templates in any image editor that supports layers, including Adobe Photoshop and
Fireworks. Photoshop Elements 8 is shown in this exercise. You will need to make minor adjustments if you use
a different version of Photoshop Elements or you use the professional version of Photoshop, but these steps will
be very similar in all recent versions of Photoshop and Elements.
Chapter 9: Creating a Family, Vacation, or Hobby Site
2. This starter image is made up of
many layers, which makes it possi-
ble to edit each piece of text and
delete or replace each image inde-
pendently. You can view a list of
layers by opening the Layers pal-
ette. Choose WindowOLayers to
open the Layers panel. As you see
in this figure, this starter image has
many layers, each named to corre-
spond to a section of text or an
image placeholder in the template.
Tip: You can select a layer by click-
ing it in the Layers panel. If you
select the Auto Select Layer check
box (at the top of the workspace),
you can also select layers by
simply clicking the image place-
holder or text in the starter image.
3- To edit the text in any image in
Photoshop Elements, first click to
select the Type tool in the
Toolbox. (Look for the capital T.)
<^JVB£#
If, when you open this starter image, you see the error message Some text layers contain fonts
that are missing, your computer's hard drive doesn't have the fonts I used in the starter image. If you
choose the Text tool in Photoshop or Photoshop Elements and start to edit the text in this file, the program
automatically changes the text to a font that's on your hard drive. You can then click and drag to select the text
and use the options at the top of the workspace to change the font, size, and color to best suit your design.
I used the Times New Roman font in this design, but you can use any font you prefer. You can purchase and
download fonts from any number of sites on the Web; just search for Free Fonts in any search engine.
Add Photo
130 xl25 px
/ SI} Part " : Puttin 9 the Pages Together
ol active, click and drag to
f text and then type to
replace the words. (If you're prompted with
the message Font substitution will
occur, click OK to continue, and Photoshop
automatically changes the text to a similar
font on your hard drive.)
T
%
Add Photo
130 xl25 px
Second
Name
File Edit Image Enhance Layer Select Filter View Windcn
HQine-Page-SlartEr-Image.tif @ 1
t.t
Add Ph<
225 bv 125
%
Add Photo
130 x!25 px
]
To change the font, color, size, or other text
options, select the text you want to change
and adjust the Type tool settings on the
Options bar, at the top of the work area. In
this figure, I'm adjusting the font size for the
selected text.
Home- Page- 5tartEr-Image.tif @ [First Name, RGBy^ * X
6.
To reposition text or images on the page, click
to select the Move tool from the Toolbox. (In
Photoshop Elements, the Move tool is repre-
sented by the double-headed, crossed arrow
icon at the top of the Toolbox). Then click
and drag any section of text. Remember: If
you click and drag a corner, you change the
size of the text or image; if you click in the
middle of a text area or image and drag, you
move the selected item.
Add Photo
225 by 125 pixels
Add Photo
130 x 125 px
Chapter 9: Creating a Family, Vacation, or Hobby Site
7- To add a photograph to a layer, you
must first open the photograph as a
separate file. While the starter
image is still open, choose
FileOOpen and select any image
from your hard drive. In this exam-
ple, I opened a photo of Mark,
Mary, and Zoe Loos, which I want
to add to the banner image at the
top of the page.
5. Before you copy a photo into the starter
image, it's helpful to resize it so that it will fit
the design. I'm going to use this image in the
banner at the top of the page, so I want to
resize it to about 225 pixels wide. Hint: each
placeholder image includes recommended
dimensions. To resize an image, choose
ImageOResizeOlmage Size and then change
the Pixel Dimensions. (You find more
detailed instructions for resizing images in
Chapter 5.)
9* To copy an image into the template, first click
anywhere on the image you want to copy, to
make it active in the workspace. Choose
SelectOAll to select the image, and then
choose EditOCopy to copy it. Next, click
anywhere on the starter image (to make it
active in the workspace) and then choose
FileOPaste to insert the new image into the
template. After you paste an image, you can
click anywhere within the image and drag to
adjust its placement. You can also click and
drag a corner to change the size of the image.
(Note: Make sure the Move tool is selected.
See Step 6 for a refresher.)
Width: 3.125
]
•S Scale Stales
•S Constrain Proportions
□
Resarnple Image:
I
bic (best for smooth gr
Part II: Putting the Pages Together
10. As you add more images, you can adjust the layers by
positioning one image in front of another, which is
important when images overlap or when one image is
obstructed by another. To move one layer in front of
another, click and drag the layer to a higher position in
the Layers panel, or right-click (Option-click on a Mac)
and select an option to bring the layer forward or back.
To delete an image or text, click to select it and then
press the Delete key.
/ /. Continue to open photos you want to add to the
design, resize them as necessary, and then copy
and paste them into the starter image. In this
design, I used three small images on the left, with
larger versions in the main section of the design,
but you'll need to crop a vertical image to get it to
fit into the small space on the left. To cut a section
off of an image that you've inserted into the design,
select the Rectangular Marquee tool; then click
and drag over the portion of the image you want to
remove, creating a box around the part you want
to delete, and press the Delete key.
You can add as many images as you like, and you can resize them and drag them around the page to change
the layout. The more you alter this design in Photoshop, however, the more you need to alter it in Dreamweaver.
For the purposes of this task, I show you how to edit images into these starter images just as it's designed so
that you can easily reconstruct them in Dreamweaver. As you get more adept in both Photoshop and
Dreamweaver, you can make more significant changes.
Chapter 9: Creating a Family, Vacation, or Hobby Site
12. After you make all the changes you want to the starter
image, be sure to save your work by choosing
FileOSave. Then save the file again by choosing
, =j>Save B A| andname the new file something like
-Page. That way, you have a backup
eted design before you start slicing up
the image to save each piece separately, which you do
in the steps that follow. Hint: If you ever want to go
back to the original starter image included in the tem-
plate, you can always download another copy from the
Web site.
File Edit Image Enhance Layer Select Filter View Window Help
p^^^^com^^t
Open As... Alt
Open Recently Edited File
Duplicate...
Alt+Ctrl+O
-alias
Mode:
Normal Width:
—
ge-Startei- Image tif £ 100% (Oui Family. RGEVH
The Loos Fami
13. One of the challenges when you design a page
like this one in Photoshop is deciding how to
save each of the images as separate files that
you can insert into your Web pages in
Dreamweaver. A good place to start is the
banner. Banners (including this one) typically
appear at the top of every page in the site,
but thanks to the magic of Dreamweaver
Templates, you need only one copy of the
image. To prepare the banner image for the
Web, first choose the Crop tool from the
Toolbox, and then click and drag to fit just
the top banner area inside the cropping area.
krtnxlMip ElainaritE I ritai
Crap Thb Imini'i'
Ciuti. Carnal | DprrtCmp |
H. You can drag the corners of the crop outline
to adjust how the banner will be cropped.
To complete the crop, just double-click in
the middle of the crop area or click the Crop
tool again and click Crop in the confirmation
dialog box that appears.
Mary
Zerafa
Loos
Mark
Loos
New
Open...
Open As... Alt
Open Recently Edited File
Duplicate...
Ctrl+O
Alt+Ctrl+O
Save for Web...
tAlt+Shift+Ctrl+S
as
n
75. After you crop out just the banner image,
choose FileOSave for Web to save the
cropped portion as a new file optimized
for the Web.
/ 88 Part " : Puttin 9 the Pages Together
16.
In the Save for Web dialog box that
appears, choose JPEG from the
Optimized File Format drop-down
JPEG foriiat works best for
ptliMe millions of colors,
pTrotograpns. Adjust other
settings, such as compression,
and click OK. Then, in the Save
Optimized As dialog box, enter a
name for the new image, make
sure to save the image into the
images folder in the Family Web
Site template folder, and click
Save. (Y ou find more detailed
instructions for optimizing images
with the Save for Web dialog box
in Chapter 5.)
^^^^^^^^^^^^
The Loos Family
■:■
^^^^^^^^^^
The Loos Family
hnli - Cm
171
Sign In Create New Adobe ID
File Edit Image Enhance Layer Select Filter View Wi
1
irv Undo Crop
Ctrl+Z
™_!
1
/ 7. Now for the part that may seem tricky at first
but will save you lots of time after you get the
hang of it. After you save a new version of the
banner optimized for the Web, you will see
the original image you cropped still open in
Photoshop. Choose EditOUndo Crop to restore
the full image. Now you can crop the next part
of the image you want to save for your Web site.
18. Save each cropped section of the
image in turn, using the Save for
Web dialog box. After you save all
the pieces of your design, you're
ready to move on to the next task
and put them all together using
Dreamweaver.
S±u< Fill Ml! 3
..II.-.
Hefc
rum
E
hi „ + F u _
*' 41? -I*
111
IV_LOO0 riwiHCvIrr:
jr.nni-
2«m
Chapter 9: Creating a Family, Vacation, or Hobby Site
besiqninq a Web Site for the Entire Family
X* — Siitfi j/ou
Need to Know
Toolbox:
i> Adobe Dreamweaver
w The Family Web Site
template from the com-
panion Web site
Your own text and
images, to personalize
the template
Time needed:
About two hours
In this task, you set up a new Web site with the Family Web Site tem-
plate, which can be used to create any site that features multiple people
or sections. As you work through the following steps, remember that
you can alter this template a little (by simply adding your own text and
images) or alter the design a lot by changing the colors, font options,
and other style settings to make the design more your own.
/. In Dreamweaver, choose SiteONew Site. In
the Site Definition dialog box, click the
Advanced tab. In the Site Name text box,
type a name for your site. In this example,
I entered Loos Family. Click the Browse
icon next to the Local Root Folder text box
and locate on your hard drive the folder that
contains the Family Web Site template.
Site Definition for Loos Family
I Basic | Advanced |
Category
Local Info
Local Info
Remote Info
Testing Server
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Site name: Loos Family |
Local root folder: C:\Users\Artesian Media PC\Documents\DIY Web i
Default images folder:
9
Links relative to: a Document < Site root
HTTP address: http://
This address is used for site relative links, and for
the Link Checker to detect HTTP links that refer to
your own site
Case-sensitive links: nUse case-sensitive link checking
Cache: [7] Enable cache
The cache maintains file and asset information in
the site. This speeds up the Asset panel and link
management features.
OK
Cancel
Help
If you want to rename the folder that contains the Family Web Site Template, do so before completing the site
definition process. If you change the name of the main root folder of a Web site after you complete the site
setup process, you have to repeat the setup steps to identify the renamed folder as the local root folder in
Dreamweaver.
Part II: Putting the Pages Together
2. Click the Browse icon next to the Default
Images folder field. In the Choose Local Images
Folder dialog box that appears, select the
esjoldei in the Family template site and
OTLpl^kGthe Site Definition dialog
vefne re^K)f the options alone for now,
and click OK. If you haven't selected the Enable
Cache check box, a message box appears,
asking whether you want to create a cache for
the site. Click Yes to speed up some of the
Dreamweaver display features.
HIES
O Loos Family
Local view ▼
COO
Local Files
a
-
a
S |Q Site - Loos Family (C:\Users\Artesia. . ,
B G ess
B lb images
Home-Page-Starter-Image . tif
Loos-Farnily-banner . jpg
Mark-Loos, jpg
Mark-sm.jpg
Mary-Loos, jpg
Mary-sm.jpg
Our-Family-Banner.jpg
Swap-Image-Starter . tif
swap-images.tif
Zoe-Loos.jpg
Zoe-sm.jpg
pages
°T7 child-l.html
child-2.html
child-3.html
child-4.html
dad. html
mom. html
~~_ other.html
Templates
personal-pages, dwt
sb
■
■1
Dw
ADOBE DREAMWE
□pen n FLrcznl Ifrn
DtflWUun fin Lauu Family
Cstagaiy
FtenttE lrfu
Vsf sttri GortM
■ Cbatiiq
DiagnNotBS
Rt View Caunra
5ke njnn; LaazFintf
Crf-iiit iyuqsc frtderi
o« Chnnrai IbcbI inagjDS Faldor for-iNi? Laos I
Select j, LwnF«r^
RfiffltPlKhS
Dak rro-
type
Sen
r 17 lira g=~]
|,Timplitti
9 >
Artisan Madia
Ft
*
tnmputtr
retaflve- Us. arid Far
(TIP hSet refer to
i«b.ng
art rtfornatan ri
■ P-swt F>and «id k+
Caicri 1 1 Hap
BQ index.html
3- When you complete the site setup process,
the files and folders in the Family Web Site
template are displayed in the Files panel in
Dreamweaver, at the side of the workspace.
If the Files panel isn't visible, choose
WindowOFiles to open it. (For more detailed
instructions on the site setup process, see
Chapter 6.)
FT
irt
g Title: Our Family Date: 9/1 [Log... ]
:
4- Double-click the index . html file
in the Files panel to open the home
page. The home page of this site is
designed to showcase photos and
text created in an image program,
as you do in the previous task
using Photoshop Elements. You
can replace any of the image place-
holders with images you've pre-
pared for the Web.
Or ^
i:i-.|!,m..ii.v:-i
Fib Edt Virw hurt Minify Fmmtf Commindi 5bt Wndmi Hilp
.:: .1-.
life. CvrixM-.
^■.■■■■1 —
0
±
IS
LmlFla
£3 5*1 • Leo I FnJr M-:!lJi«-ii.!'iil.in...
■ ^ HC*>t-p40riiaWl-lTl*Jf,tf
- ■ ■_ LaarFaiif lumi .fv
. ■ .. . . i .
Or-F«ii*y-F&FiB , .|ig
■ ftM'LDG!-Dg
£ Zba-anjjq
d~JhJ ■ 3 1 Mfn
lI ^J'!bL I i^j i J
"3] tf4W.I
-5) aad.l
— 5l ran-h
^ TmpUtK
Chapter 9: Creating a Family, Vacation, or Hobby Site
5- At the very top of the home page, change the page title
by replacing the text in the Title field. Include your
name or a brief title to identify your page. (The page title
he text trfct appears at the very top of the browser
owlwM^Gge is viewed online and the text that's
ne bookmarks your page.)
Window Help
:esian Media PC^Documents\DIY Web SitesVTer
Title:
The Loos Familyl
4Mt
■ 1 1 1 1 1 1
400 450 L> 500
i i i i 1 1 iHA 1 i i i i
550
1 1 1 1 1 1
6. To insert your own images,
double-click to select any image
placeholder. In the Select Image
Source dialog box navigate your
hard drive to locate the image
you want to insert, click to
select the image you want to
add to the page, and then
click OK.
7. To add or replace other images,
repeat Step 6. To delete an image
or placeholder, select it and press
the Delete key.
You want images on your site to download quickly and display well on-screen, so make sure that you optimize
your images and save them in GIF, PNG, or JPEG format before adding them to your Web pages. You find
instructions for editing the starter image for this template in the first part of this chapter and you find detailed
instructions for saving images for the Web in Chapter 5.
Part II: Putting the Pages Together
Creating and Linking New Pages
st u ft you
Need to Knou)
Toolbox:
\* Adobe Dreamweaver
The Family template files
from this book's compan-
ion site at www. Digital
Family. com/diy
Note:You should have
already completed the
preceding tasks in this
chapter
Time needed:
About two hours
Adding more pages to your family, business, or other Web site, is easy
when you use Dreamweaver templates, like the ones I created for this
book. And once you've added pages, you can use the template to auto-
matically link the new page to all of the other pages. This family tem-
plate, like all of the other templates featured in this book, includes a few
pages to get you started, but you can always add more by following the
instructions in this task.
In this task, you discover how to create a new page from a
Dreamweaver template and link that page to all of the other pages in
the site:
7. Before you create a new page in a site, make
sure you've completed the site set up pro-
cess in Dreamweaver, which is covered in
the previous task. To create a new page from
a template, choose FileONew.
File Edit View Insert
index.!
0 :
5 -
0 -
jjj
New...
Open... ^
Browse in Bridge.
Open Recent
Open in Frame...
Close
Close All
Share My Screen.
Modify Format C
Ctrl+N ]
I Ctrl+O
Ctrl +Alt+0
►
Ctrl+Shift+O
Ctrl +W
Ctrl+Shift+W
New Document
0
Blank Page
Blank Template
Page from Template
Page from Sample
7
Other
Site:
&
jjj
jjj
&
jii
si,
&
&
jL
ji
ji
2
ji
i &.
4 L
Backgrounds
Business Site Templat
California Wildlife Pho
ChocolateGameRules
Davi Design Studio
David LaFontaine
DigitalFamily 1-09
Eclectic Film Sales
Experimental Musical !
Fallow Deer
Family Web Site Temp
Flamingos
Frank Vera
Jasper for DIY
Jasper Johal Photogr;
JC Warner
Jenny Hontz
Joomla sandbox
Karen Ward
Loos Family
Mflke<;Vni iCra7v.rnm
Help
Preferences...
Template for Site "Loos Family"
w
inside-pages
Gel: more content. . .
The Loos fam
Ml level heading
H2 level heading
Lv-'" <- . ut aw. tottMatuu >]i.',w Jv .i fvsrt«t4icr
G5S
XHTML 1.0 Transitional
DocType:
[V] Update page when template changes
Create
Lor-«. (wn 5*1 vriet, tr*>»^-«wr« sac*K»-oe»r ft-wr* jiu>5
CV«Sll ».<1<J^ njlun\ ersl nil! Wttip*iIi/t> <Jl»n *t i*y<p»ni -*
«r\i r<< ***~jy* w*. orwi**. Fern*******,* We" n
«lniu*» »»<J«t* d. *!*»»«. r*#i Dor« n*: ItW
Cancel
2. In the left side of New Document
dialog box, choose Page from
Template, in the Site section, make
sure that the site you are working
on is selected, and then choose the
template you want to use to create
your new page. A preview of the
template is displayed in the right
side of the dialog window. Click
Create to create a new page and
close the dialog box.
Chapter 9: Creating a Family, Vacation, or Hobby Site J 93
Title: News from The
350
1 1 1 1 1 1 1 1 1
400 ,
1 1 M 1 1 1 1 1
450 ,
1 1 1 1 1 1 1 1 1
Loos Family ^
500
J-LLL
i ... | Document Title
650 ,
1 1 1 1 1 1
The Loos Fami
3- It's always good practice to
save a new page as soon as it's
created in Dreamweaver. It's
also a good idea to include a
brief description with a few key
words specific to the content of
each page in the Title field. In
this example, I named the page
news . html and I changed the
title to News from The Loos
Family.
4- You can edit or add text to any
editable regions of the new page,
which are identified with a light
green box and an editable heading,
such as the mainContent region
shown here. Anything within the
editable region is easy to change,
such as the headline which I
changed by selecting the text "HI
level heading" and replaced by
typing in "New from the Loos
Family." Remember, you can't
change content in the locked
regions of the page, such as the
banner region at the top of the
page or the links and copyright
information at the bottom. Those
areas can be changed only in the
template. If you roll your cursor
over a locked region, the cursor
arrow changes to a circle with a
line through it, indicating it can be
edited only in the template itself.
THE LOOS
mainContent
News from the Loos Family
Lorern ipsurn dolor sit arnet, consectetuer adipiscing elit. Praese
convallis luctus rutrurn, erat nulla ferrnenturn diarn, at nonurnrnv
Maecenas urna purus, ferrnenturn id, molestie in, cornrnodo port
quarn ut lacus. Quisque ornare risus quis ligula. Phasellus tristic
condirnentum adipiscing. Aenean sagittis. Etiam leo pede, rhonc
vulputate at, odio. Donee et ipsurn et sapien vehicula nonumrny
Fusee varius urna id quarn. Sed neque ml, varius eget, tincidunt
/ ' >art "■ P utt ' n 9 the Pages Together
5.
To add images to an editable
region of a page, simply click to
place your cursor where you want
dda newlmage and choose
jp Select Image
rc^ r dicfl6£ v^rWow, navigate
your hard drive to find the image
you want to add and then double-
click the image name to select it,
close the dialog, and insert it into
the page. After you insert an image
into a page, click to select the
image and you can use the
Property Inspector at the bottom
of the workspace to make addi-
tional changes, such as aligning
the image to the right or left,
which you can do by choosing
float-right or float-left from the
Class drop-down list.
: mainContent
News from the Loos Family
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum, erat nulla fermentum diam, at
nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisq
ornare risus quis ligula. Phasellus tristique purus
augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in,
vulputate at, odio. Donee et ipsum et sapien
vehicula nonummy, Suspendisse potenti. Fusee
varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus.
Vestibulum ut nisi. Donee eu mi sed turpis feugia
feugiat. Integer turpis arcu, pellentesque eget,
cursus et, fermentum ut, sapien. Fusee metus mi,
eleifend sollicitudin, molestie id, varius et, nibh.
Donee nec libero.
H2 level heading
> <dlv#containe <mmtinstance: editable > <div#mainContent> <p> |<imq.float-leFt>| | ^ C4 100% v 762x484 v 67K
PROPERTIES
Rename...
Attach Style Sheet.
Li
ID
Image, 32K w 306
H 440
Map V Space
TJ 'G O V H Space
Src
Link
images/dog. jpg
g| O Alt
Family dog
Q> Q Edit
a J*
Target
Original
Border
\£) Align
Default
▼
Class float-left [▼] ®
Ow
w Open
Look in: 1) Templates
1
Recent Places
Name Date mo... Type
notes
Size Tags
inside-pages. dwt
Desktop
Artesian Media
PC
.«.
Computer
A«« Filename:
inside-pages, dwt
Open
N etwo rk Files of type: All D ocuments [ x . htm; x . html; x . shtm; x . shtml;". hta; x . htc; x . xhtml;
Cancel
6. If you want to make changes to all
the pages created from a template,
such as adding a link to your new
page, you must first open the
Dreamweaver template itself by
choosing FileOOpen and then
opening the . dwt template file,
which is stored in the Templates
folder in the main root folder of
your Web site. In the family tem-
plate, the Dreamweaver template
file is called inside-pages . dwt.
Site Root
Chapter 9: Creating a Family, Vacation, or Hobby Site
7- You can add a link to the bottom of this tem-
plate by simply typing in the text you want to
serve as the link. To make the text a link,
click and drag to select the text and then
click the link icon in the Common Insert
menu (or choose InsertOHyperlink).
5. In the Select File dialog box, navi-
gate to find the file to which you
want to link. In this example, I
selected the news . html page,
which I created in the first part of
this task. Click to select the file and
then click OK to create the link and
close the dialog box.
o« Select File
Select file name from: » File system
Data sources
I ~ I
Server.
Look in: Loos Family
Name
j. _notes
images
Templates
favicon.ico
[^J news.html
Date modified
Type
Size
J| CSS
pages
v favicon.gif
'*] index.html
Tags
File name:
news.html
[ OK
Files of type:
All Files ( x . x )
▼
URL:
..;
'news.html
Parameters...
Cancel
Relative to:
Document
inside-pages, dwt
Change default Link Relative To in the site definition.
Update Template Files
Update all files based on this template?
pages\Zoe-Lee-Loos . html
pages\dad.html
pages\mom.html
pages\other.html
news.html
Update
5
Don't Update
I
9* When you save the template file,
Dreamweaver automatically opens the
Update Template Files dialog box and lists all
the pages created from the template. Click
Update to add the new link to all the pages.
Part II: Putting the Pages Together
10. To test your links, preview the page
in a Web browser by choosing
Tl^^eyj^yl in. Bowser and then
^5 ( \iJ^J^i^ ( csy er y° u nave
associated^vith Dreamweaver.
When you view the pages in a
browser, even on your local com-
puter, you can easily follow the
links by clicking them just as you
would on a Web page that has been
published on the Internet. You
learn more about previewing your
Web pages and publishing your site
to a Web server in Chapter 10.
You can find many more tips and tutorials for working with Dreamweaver, including advanced techniques like
creating rollover images with Dreamweaver, atwww.DigitalFamily.com/dreamweaver.
Chapter 10
DropBtfaJffeg and Publishing a Web Site
It's a shocking scenario: You create a page design that looks
just perfect in your favorite Web browser on your own com-
puter. You publish it on the Internet and tell all your friends. And
the next thing you know, your cousin in Iowa and your friends in
Brazil are telling you that it looks terrible, the text is unreadable,
and your Flash files don't play at all.
Don't let this happen to you. Take time to test your work before
you publish the site for the entire world to see so you can
make sure that it will work well in all the different Web browsers,
operating systems, and monitor sizes that your visitors are likely
to use.
Before you "go live" with your site, preview your pages in as many Web browsers
as possible to make sure that your site looks the way you intend in the many differ-
ent browsers in use on the Internet. If you don't have that many browsers on your
own computer, don't worry. You can find many tips in this chapter to help you,
including a collection of online services where you can test how your site will dis-
play in dozens of Web browsers on four different operating systems.
And, as you'll discover in the tasks in this chapter, it's a relatively simple step
to use the many Dreamweaver testing features to ensure that all your links work
properly, and to check for common compatibility problems that can lead to differ-
ences in browser display.
In the first part of this chapter, you find detailed instructions for previewing pages
and using the Dreamweaver testing tools. In the second part of the chapter, you
find out how to use the built-in Dreamweaver File Transfer Protocol (FTP) features
to copy your Web site from your hard drive to a Web server on the Internet. And
finally, you find instructions for adding Google Analytics (and other traffic-tracking
services) to your site so you can see how many people visit your pages, where
they come from, and how they get there — all of which play an important part of
gauging the effectiveness of your site.
Tasks Performed
in This Chapter
Testing Web pages in
different browsers
Using the Dreamweaver
link-testing features
w Publishing a site with a
Web server
Using the Dreamweaver
FTP features
Part II: Putting the Pages Together
If you haven't been there already, check out Chapter 3 for recommendations and tips
for choosing the best Web hosting and registering a domain name.
n^stmdin^ Hou) Web Paqes
Look on Different Computers
One of the more confusing and frustrating aspects of Web design is that you can
create a page that looks great in Dreamweaver and test it in a browser to confirm
that it looks fine only to discover later that it looks terrible in a different browser
or on a different computer system. Web pages can look different from one system
to another for many reasons, but the following issues are the most common
culprits:
\^ Browser differences: Today, dozens of browsers are in use on the Web, not
counting the different versions of each browser. For example, at the time of
this writing, Internet Explorer (IE) 8 is the newest release from Microsoft,
but a significant percentage of Web users haven't upgraded yet and are still
using IE6 or even earlier versions. (More on browser differences in the next
section.)
Hardware differences: Another challenge comes from the differences between
Macintosh and Windows computers. For example, most fonts appear smaller
on a Macintosh than on a PC (Times 12 on a PC looks like Times 10 on a Mac).
Image colors can also vary from one computer to another.
Individual resolution settings: In addition, the same Web page may look very
different on a 21" monitor than it does on a 15" monitor. And even on the same
monitor, different resolution settings can alter the way a page looks. On a PC,
a common resolution is 1024 x 768; on a Mac, the resolution is generally set
much higher, making the design look much smaller, even if the monitor sizes
are the same.
As a result of all these differences, the same Web page can look very different to
the many people who visit a Web site. For example, Figure 10-1 shows a Web page
in Internet Explorer on a PC, and Figure 10-2 shows the same page in Safari on a
Macintosh. Notice that the text displays in a larger font size on the PC, changing
how the text wraps around the photo in the left column.
This challenging aspect of the Web is at the root of many of the limitations
and complications of creating good Web designs. With patience, testing, and
an understanding of the tags and styles that are most problematic, you can
create great Web sites that look good to most, if not all, of the people who
visit your Web site.
Chapter 10: Testing and Publishing a Web Site J 99
Drop Books
f' flmfc TaHe Nitntt I Anitm Pe*ojr ■ VTndtHn hie«p*i E xptlppoi
I I I ; •
iQj . t |^ nnijiVJUrtl-YiJta.Lnri'
)tl | Iff rV)*paij«ir
J? w
W Rnwfcr ^ Autfln "table Manage | AhS* RiIix
HUME
ABOUT ME
appointments
Treatments
POUCIES
Bates
Linus
Contact
CHAIKMASSACjE
New Clients
HOME
[ am a vtto.. mom, entrepreneur and Massage Therapist ] have
a wanderlLJ husband a bcaubful dsjghtEr. My family ia the
Ight alntt ire. Chert out my Ab«utM«tab to leammoni..
Haoi-io practiced Mascaga Tharapf for the last riinc years [
draw Tram many riirerent types of Hassans Tnr each session, I
taicrradn Maaaaga seisinn ba your specific: needs and
Hjncerris.TraEtments may include a blend oT Deep Tissue,
lotusng an bha deeper I syern of musds, -and Tharnpautic
Figure 10-1: A Web page displayed in IE 6 on a PC with the monitor set to 1024x768 resolution.
Note that the right column has been bumped down below the left column,
a common problem in IE6.
| ll Mali File Edrt View Hillary Bojkmirt:
Wmdm Hdp
m * <&
Austin Tabli MatsiiQhi 1 Aussie Pali*.
1 — 1
Ho*u
About Me
appointments
Treatments
Policies
Bates
Links
Contact
CHAI R MASSACi E
New Clients
HOMF
[ an a mH», fdUd, iatmpriflf.r ar-C HiuW TharJCiH. J hJvL a
mctiAitfiA huiUi a eaiuuAJ liiuuncaf. My ramrr it ir* kef t tf
my Hii. (ll-SCk Out my .aLhjuL Mu Ub tb ki jrn iTibri .
Hart-g practiced mbtoiijj "itm-apy nor the Last Nne yearj. r 4t
tny n-iiny dlfrerp-t types <L* Hpsrorje rjr {fj- «ssor 1 tlhr
Mr ^sssfl? iro>or to >our icwnc ret* and ccce"-?
Treatments may inrt.* a Mend of r>™ Tis^e, roaii*-^ <r thr
ihtytii iLTfui li-muHjd, j-ilTliir^H.tLHduvi, nmrnJCk-^
NUuXi^i arc i"d m
Lfi ttapti raak- r»- umi rbi ma^aga witr acru , cars ar'e
pOCabJalft ilTkkHji. YOu hart faitnU tMLttr arc Mir ftr-r ifwHt
Hbsi, Massage jti5t nukes you reel bertw. In is rc- (fcfder I or
nrj those spots B-at hst and reel to wrVy— mpjwa? and i-epng
people W better is someB-*-C; r nr.jiy ij« rJo*"g,
CWi bi schedule an Hips*-tr-<nt at in-7W-7D5] re* either of mjf
toiiuafi. J am (raocjjMu ai Fium Etotfcm Wiat'iii and Thim
bom i- S/jutr r^tial Ta^ac. Hv raui art s4S Tbr a ana
haui niiliin Hid ten ftf a hour and a raf uubi. ] lod< rar^vd
!•. I vl'.l •, V-.U
Figure 10-2: The same Web page displayed in Safari 3 on a Mac with the monitor
set to 1280x800. This is how the designer expected the site to look.
Part II: Putting the Pages Together
Understanding How Browsers
Site's Appearance
DroTOf
y reasons why Web pages can look different from one browser to
another, it boils down to this: Web browsers have evolved over the years to sup-
port new technologies on the Web. Thus, many older browsers still in use have
trouble displaying some of the advanced features you can use on your Web pages
today. Compounding this problem, the companies that make Web browsers —
including Microsoft, Google, and Apple — don't all agree or follow the same rules
(although most are getting better at complying with the same set of standards in
their latest browser versions). Dozens of browsers are now in use on the Web, not
counting the different versions of each browser. For example, as I mention earlier,
IE8 is the newest release from Microsoft (at the time of this writing), but a signifi-
cant percentage of Web users haven't yet upgraded and are still using IE7 or even
IE6, which is notoriously bad at displaying CSS (Cascading Style Sheets) and other
modern Web features.
The result is that the same Web page can look significantly different to the many
people who visit a Web site. The differences can become even more pronounced in
older browsers or in monitors of different sizes.
This challenging aspect of Web design is at the root of many of the limitations and
complications of creating Web sites that look good to everyone who may visit your
pages. HTML was designed to help ensure that Web pages look good on every
computer on the planet, and as a result, some of the rules of Web design may seem
strange or limiting at first. Despite these efforts, and a growing movement toward
more standardized Web development, getting your pages to look exactly the same
on every computer on the planet is difficult if not impossible. As a result, most
designers strive to create pages that look as good as possible on as many browsers
as they consider important, even if the same pages don't look exactly the same on
all browsers.
Which browsers you should design for depends on your audience. If you have the
luxury of having accurate reports on the visitors to your site, you can see a list of
all browsers used by visitors to your site. (At the end of this chapter is information
about using Web-statistic services that include browser usage information.) For
example, your Web statistics may reveal that 27 percent of your audience uses IE7,
18 percent uses IE6, 25 percent uses Firefox 3, 23 percent uses Firefox 2, 5 percent
uses Chrome, and 2 percent uses Safari. With those numbers in mind, you may
decide that your pages should look attractive in IE and Firefox, but you'll settle
for them not looking quite as good in Safari and Chrome, which at this point have
lesser percent of your audience and display some features quite differently.
Entire books and Web sites are dedicated to the differences among browsers, and
how to best design for everyone on the Web. To help keep things simple for you, I
include templates in this book that are designed to look best in the most recent and
most commonly used browsers on the Web, including IE8 and IE7, and Firefox 3 and
2. However, you should note that making significant changes to these designs may
result in unpredictable results, which is another important reason to test your work
thoroughly before you publish your site.
Chapter 10: Testing and Publishing a Web Site
Previewing Web Pages in Multiple Browsers
\J — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Dreamweaver
w Microsoft Internet
Explorer
Mozilla Firefox
w Apple Safari, Google
Chrome, or another Web
browser
Completed Web pages
Time needed:
Less than half
an hour
Previewing your Web pages in a variety of Web browsers is the simplest
way to make sure that they look suitable to at least most of your visi-
tors. The following task walks you through the process of adding brows-
ers to Dreamweaver for easy previewing and for viewing the same Web
page in multiple browsers.
■ - O • A •
| l<> Via* han
liM Cinnndi 3ta VAalaw hbf
Nop..
'">iir, .
^ - . i r., i 4 .
Qe*n t'lrm*.
Qui
CVniAJ
Own . r,,r
tmM
Zi .4 to imvii Saw. .
>r*a - c J i -
»aaUo*
tliairl
Ea^aa*.
COAta**
at lixatfr
CnaaVPaaa
/a) rant
Cv»*a* aat* Ftaa*x
OaiaanUaaM..
OM.O
M Ja^^^ **■ AataildaaHa-aoalaaaai Jf. »>. T . Px K iOaYV*-*)-.
' . b K : ft ; f? H* ft" !* !*.. ,
aU> taaamaa
I am - tktm. 'raxri , antral* a nan* arid Maisar^a TVavapat. I raaas t
»crfWTii tajtitanrj e. tarrajtfiji rtnajftw Mr r«rd* e thf 1
hjrrof m, .u ■ o-aK* out m« «t*M wo tso to toar. nore
«5«'.) el r edNBasgpe rters>, tw »(ijs(m«(;i |
A ^ |W*» i ii I rt llalia ^ CJWt fjf Wattjgt ftl ^tfliiia^aJI. [ I
jajntn yctr *.-~-n- raaai da and
•.i.ajr.iu
Mtfai.-... I, t
Fan at rnuada. and Tharaaaai/.r.
k^Ti " r — aa a aaa j
2ay Jaaar alia la i fiaaaa.
-
• /
Leu
B a MM «•
* lagal
h Open a Web page that you want to preview
in Dreamweaver, choose FileOPreview in
Browser, and choose a Web browser from
the list of browser options. (You find out
how to add more browsers to this list in
Steps 3 and 6.)
rr oiMt«T«M*l
C '-li » n a**a I n r M aa a 1 oaraflticri raafi i* . dT i .rm ri i rn i tit aac in r.sr nm
tffanatu £ Aurai tatli Manaoa |auilt Mai
•a I OaaraV] rafU« Vaia.|aav>tl*liia< t (tai rr
Q
f-ajr a Sard* • t«ai
AUSTIN
HCuvU
ABOUT Mi
ajTOIMIMUMIS
TUATMtNTS
r«Hi< ir%
Rates
IINHS
CONTACT
CHAIR MASSACt
NIW CUINTS
HOME
I jtn j wta aom.urrQ(tu>uit MNaaaajM T>wm I ti»a
a WTa-caamJ raj r hand a hma Jtx\j I tijaxjarar R, tarn a ma
»:»<■ •> • . ". '.I..l..,>|.,irv,-i.-
kj-") >»'T <v-J u*;;^: IN* joy •(■ c»> I n<r» ink (
BVaav Vran nan « -Mlai ajil tipaa n> Manama ha- aa d i aaaraon. 1
t»l)t *».» Wjtojc :«;:•><■ to rOu' ; wdt< nMtfc >'.)
t:n:i'Ti. TradUiaMla may vadudar ■ tadnd of Dajap *niui.
twuS'-j :« tra< deeper lnwi c* musde. ard Hi t» so tut*
Kai lagai . (rrarKitarrj raanaJbpn and awararatt
& a aaipW raal ■ , vau csnai in ft* a ri aai iga mth adiaa . paana
and owat*f re stmjorj. nit bene ee)np better end wtfi
1ULf kUIt. IRall HUtaal* lUatlTailari n)u taall tjaXtaVf It ri fij
a» HMM I r-sn raid tttwe stajt^ rA9t ti at ^nrj a*H 9/> »ur* r—
laaKVlOe and raaMig OuOIsa laa) talttul a (tralTiral I raltf
k)«e 4oa~o
CalltB ulaarl aai an aapaantraanr at nMtaVMB tor aattaar e»
r> i ocrrrc I am [»scTK«ig x L«jt« e«£tom ^aMrkKc
1trwa>-ba-th in aV-aCti CartraJ Ouartjn Tataa Mr ranaa ana ft-.
tc J On*-hour and $CO for i raju jraj a hi* i«;cr, I
loa> 'cr-* irl *: rriatrg -ou
2. Study the page carefully, testing all the links,
rollovers, and any other special effects to
make sure that the page appears how you
want in this browser.
Part II: Putting the Pages Together
3- Return to Dreamweaver to make any changes
ou want to the page. Then test the same page
ers. To add browsers to the
FileOPreview in Browser
and then choose Edit Browser List.
waiu to me pagt
thar W^JhfOjfc^
t^\sjjf\>5^
Print Code...
Import
Export
Convert
Preview in Browser
Check Page
Validate
Compare with Remote
Design Notes...
Ctrl+P
IExplore
Device Central
Edit Browser List
Ctrl+Alt+F12
lit
Preferences
Category
General
Accessibility
AP Elements
Code Coloring
Code Format
Code Hints
Code Rewriting
Copy/Paste
CSS Styles
File Compare
File Types / Editors
Fonts
Highlighting
Invisible Elements
New Document
Preview in Browser
Site
Status Bar
Validator
Preview in Browser
Browsers: (+] f— ]
Edit...
IE ■ plute
Add Browser
Name:
Application:
Defaults: □ Primary browser
Secondary browser
Browse.
OK
Cancel
ireview and
ease uncheck
CHE option, mote cnat aeseiecting cnis option aoes nor apply to
previewing XSLT, which always use a temporary file.
Help
OK
Cancel
After the Preferences dialog box opens to
the Preview in Browser settings, click the
plus (+) sign at the top of the dialog box to
open the Add Browser dialog box. Enter a
name for the browser. (I like to include the
version number as well as the name, as
I have here, with Firefox 3.) Then click the
Browse button.
5- Find the browser you want to add on your hard
drive, click to select it, and then click Open to add
it to the browser list in Dreamweaver. Note: You
can add only those browsers to Dreamweaver
that are on your hard drive. (See the nearby side-
bar "Downloading new browsers" to find out more
about finding and downloading new browsers for
testing.) Look for the browser's executable file
(with an . exe extension) rather than a shortcut
on your desktop that you may use to launch the
browser.
Preferences
Category
Preview in Browser
General
Accessibility
AP Elements
Code Coloring
Code Format
Code Hints
Code Rewriting
Copy/Paste
CSS Styles
File Compare
File Types / Editors
Fonts
Highlighting
Invisible Elements
New Document
Preview in Browser
Site
Status Bar
Validator
Browsers:
Defaults: [/(Primary browser
□^secondary browser
Options: Q Preview using temporary file
Selecting this option will create a temporary copy for preview and
server debugging. To update the document directly please uncheck
this option. Note that deselecting this option does not apply to
previewing XSLT, which always use a temporary file.
Help
OK
Cancel
J Select Browser
Look in: Mozilla Firefox
Name
Date mo.
Type
Recent Places
Desktop
, . chrome
defaults
Jfr extensions
modules
res
^ uninstall
^firefox exe
- © dt C? EJ*
Size
. components
. dictionaries
. greprefs
I . plugins
. searchplugins
# crashreporter.exe
4$ updater.exe
Artesian Media
PC
Computer
v
Network
File name:
Files of type:
firefox.exe ▼
Open
Executable Files (*.exe) ▼
Cancel
6. Repeat Steps 3-5 to add more browsers to
the list. You can then designate which
browser you want as your primary browser:
the browser that's launched when the F12
key is first pressed. You can also designate a
secondary browser, which appears second
on the list and will launch and display the
same Web page if you press Ctrl+F12 on
Windows or §§+F12 on a Mac.
Chapter 10: Testing and Publishing a Web Site 203
Live View
Title: Austin Table Massage | Austin
ED, f ?X >K T4 Check Page
Preview in Firefox 3
Preview in IExplore
Preview in Device Central
Ctrl + Alt +F 12
7- You can also preview a page in a
browser by clicking the Preview/
Debug in Browser icon (it looks
like a globe), at the top of the
workspace, and selecting any
browser from the list.
5. Adobe Device Central is available in
Dreamweaver versions CS3 and CS4.
(You don't have this option if
you'reusing an older version of
Dreamweaver.) Device Central is
designed to help you create and test
Web sites for mobile devices, such
as cell phones. Using Device Central,
you can preview your Web pages in
many different cell phone models by
first clicking the plus sign next to
the device type and then any of the
devices listed within each group.
Matit Y. in\tr. Curb**! CStf
Fl± Eat Project Dtufcrd Hetu Window Help
**
1 nPAti re a nm J emulator |
Mm
» Di*fer8n |Ri
< a cuo
< Ej FnsnLi±
> ft F^TSU
' ft Hototfa
- fttt+fe
* HriP, Hpn.l k
BHttkiH?1 ^
< ft F-*n
< [% Fmiit
' ft Emy & il-L-Kf I
an en n
» & online licp*hv
^0
A dcvioe ten
ft Ud
ft CWomwn
ft Fluh Lim
ftFuJtau
ft HTC
Ef HtKll
-.
ftLG
ft Mmtttll
ft an
ft hkJindc
*| Qiptwy 1i» |f<i
ft PntMrtc
ft Rtijvroii
^Ult" Tjfcls I **^"jn R
AUSTIN
S
p (.ilNriHTTYPE
■ nLEmra
i HEVMD~~
» pehdeaiuei
URL
,' LiflM S£l«(l FtlFjtMlILl
■spptsis mi Lnt mikim «-.k* nin L-ptiA
Srt*< 5: wn Rf "tartig .
UjMNI'n.l
nEzHTatti
boWnioadinq new browsers
So how do you put new browsers on your hard drive so that you can preview your pages
with them? The simplest way to get the latest versions is to visit the Web sites of the com-
panies that create the most popular browsers:
^ Microsoft Internet Explorer: www. microsoft . com/ie
Mozilla Firefox: www. firefox. com
Apple Safari (Mac only): www. apple . com/safari
\^ Google Chrome: www. google . com/chrome
Part II: Putting the Pages Together
With Online Browser Emulators
Unless you own a dozen computers with different operating systems and a
vast collection of Web browsers, you can't fully test your Web site on your
own. Fortunately, a growing number of online services are available to help
you preview your pages on many different operating systems and browsers,
without having to manage multiple computers and browsers yourself.
Here are some of the best places to test your Web site online:
Xenocode Browser Sandbox (www . xenocode . com/ Browsers). The
Xenocode browser sandbox makes it easy for you to test a site using any of the
eight most popular browsers without having to install them all on your system.
You simply download and install a plug-in from the Xenocode site and then
click the browser you want to use. After the selected browser launches, you
can surf the Web as if the browser were installed on your computer. The ser-
vice is free (at the time of this writing). And because you can surf through the
browsers, you can interact with Web sites, testing all your pages, as well as
JavaScript, AJAX, and other interactive features.
Adobe Browser Labs (https : / /browserlab . adobe . com). Adobe
Browser Labs makes it possible for you to test any Web page on the
Internet in the most common browsers. At the time of this writing, that
includes IE versions 6 and 7, Mozilla Firefox versions 2 and 3, and Apple
Safari version 3. You can also test pages on different operating systems,
such as Windows XP and Mac OS X. When you use this service, the result is
a screenshot with a preview of the page, which offers a quick and easy way
to test pages' display. Small downside: You can't test interactive features,
and you can test in only two browsers at a time.
Cross Browser Testing (www. crossbrowsertes ting . com). The Cross
Browser Testing site takes Web site-testing to another level. Instead of simply
providing screenshots of a Web page in different browsers, or letting you
launch a few browsers to test pages in, this site lets you take over other com-
puters connected to the Internet so that you can test interactive features using
a variety of browsers and operating systems. For example, if you use a com-
puter that runs Windows Vista and you want to see what your site will look like
on a Mac, you can choose to use a computer with the Mac OS and then view
your site in any of a dozen browsers on the Mac system. The advantage is that
you get more than snapshots, and you also can test interactive features, such
as JavaScript, AJAX, forms, and more. This service requires that you purchase
a monthly subscription.
Browsershots (www.browsershots . org). Browsershots is a popular online
testing tool. You simply enter a page's URL and choose the options you want
to use for testing. Browsershots then tests the page you submitted on each
computer system selected with the specified browser and takes a screenshot.
Although you can't test interactive features with this service, it's one of the
easiest options and provides the largest collection of browsers to choose
from. (Y ou find instructions for using Browsershots in this task.) The basic ser-
vice is free, but it can take a few minutes or a few hours to complete testing. If
you don't like waiting, you can upgrade to "priority processing" for a fee.
Testing Sites
\J m Stuff yovr^
Need to Knout
Toolbox:
A Web site that has been
published to a Web
server
Firefox, IE, Chrome, or
Safari Web browser
Time needed:
About half
an hour
Chapter 10: Testing and Publishing a Web Site 203
'w :■:
1 i,
Q5S ft
XHTML
rw jour (testflns
IMftlllllliii
. ! ■■■ :(■
■ UulJ
► 0!
■j ■ ■-
7. At www . browsershots . org, enter the URL
of the page you want to test in the Enter URL
Here field. (Note: You can test only those
pages that are published on a Web server, but
you can test any of those pages. For exam-
ple, I can test www. calif orniawildlif e
photography, com (as I'm doing here), and
I can also test www. calif orniawildlif e
photography, com/gallery to (test the
gallery page separately). Browsershots can
test only one page at a time.
2. Browsershots offers an exhaustive array of browser
options (more than 92 different Web browsers and ver-
sions to choose from), and you can choose to test any
browser available on any or all of the major operating
systems, including Linux, Windows, Mac OS, and BSD.
You can't, however, select specific versions of these
operating systems. Place a check mark next to each
browser you want to test, but keep in mind that the
'^UnUK
_] BiltoO.B
iB A>Jlt 1 1.7
□ Op41l036
_ DilhiD
(_l ChnmiOa
l_ Mii<fiild3.B
l_l t'ilb 21
J Kinqmir 4J
(D Chnmi 1 U
■i MSIE4U
3 Up.niliD
i Eplphiny222
Iffl EhumilD
HI Msite-n
3 Op*n* fl1
_] FlMtot 1 P
19 Minefield 3 0
[_l Ch'jrr.r n
_ OpeiiSGZ
S3 Flrra-m
S3 NjMigj*iS0
IB FihrtHoa
S3 MBIEO.0
3 OpiuODD
l_l Fiwkn2U
V Gpm iOjO
(V) Fi™*rr1£
J ' 1 . IL . '.
3 Op,id 'i.hi I
0 r Intra 3D
3 OpiuIX
@ Nivtox; □
' msie e- □
in Fiiwtu^.-i
in Flr*1jnin
50 FlretoOU
53 OoeuSM
E FlretoO.1
7! N r (jLjoeB.i
-• - . ■ - < i
more options you choose, the longer it will take.
•mr W* are proud to launch world's largest web design gallery, Take a L ook!
*lr G*t_a month of priority pr oc«min_ for 2°.95 Dollar* or 20. 95 Enrol
» Screens*** ittfuest mmjp t
□ BO»MFH<
.Jwiscript enabled, Ja«aeriatiierj, Flash 10, 1024 pixels ■*ide, 3? bite perpnei
Submitted 64 minute s ago _____
Eipires m 2 rnnules [ Extend C ancel
Queue estimate: 2 minutes petansi
39 ornwws. selected, 1 staffing, g uploaned
MTe;
t' ndnw V tit*
l . ■ I
u«o a
mndr*r Hp
equest new screen snote?
3- The result is a collection of thumbnail
screenshots that give you a literal snapshot
of how your page looks across many differ-
ent browsers and systems. It can take a few
minutes or a few hours to complete testing,
depending on how busy the service is and
how many options you choose.
4- Click any of the thumbnail images to see a
slightly larger version. If you find that a page
doesn't display properly in a browser, such as
the one shown here in IE6, you can then use
Dreamweaver to make adjustments to the page
layout and test it again to see whether the
display improves.
► Screenshot request group 1
□ BOOKMAR K JfflUfJ
Javascript enabled, Java enabled, Flash 1 0, 1 024 pixels wide, 32 bits per pixel
Submitted 40 minutes ago
Extend
Cancel
Expires in 17 minutes
Queue estimate: 2 minutes (Details)
29 browsers selected, 1 starting, 1 loading, 8 uploaded
nga1
0.0.6 Windows Vista
~ms XP
Download 8 screenshots (3.9 MB)
Beta 2
Windoi/ws XP
Request new screenshots'!
Part II: Putting the Pages Together
besiqninq for mobile devices
Drop Books
ing popularity of Internet-
ile devices, a new audience
of Web page visitors has emerged. Some
high-end mobile devices (think iPhone and
BlackBerry Storm) are capable of load-
ing Web pages and do so reasonably well.
However, the screen is much smaller, and
the interactions with the Web browser is
much different — specifically, navigating by
touch. Lower-end regular mobile devices
that make up the vast majority of the market
often have small screens, reduced color dis-
play, and allow only minimal interaction.
To best manage the dramatic differences on
mobile devices, my best recommendation is
that you create a second version of your Web
site designed to best serve the limited dis-
play options of mobile devices and link to the
alternate design from your main site. If you
have experience writing server scripts (or
can hire someone to do it for you), you can
create an auto-detect script that can deter-
mine whether a visitor to your site is using a
mobile phone or a computer and direct them
to the best version of your site automatically.
Here are a few important tips to consider
when designing for mobile devices:
Because download times are much
slower on mobile devices, adjust the
number of features you offer to mobile
devices, and keep the number of images
and style minimal.
v 0 Use CSS for the design and layout of the
Web page. Outdated HTML styling and
layout options (such as frames) may not
display at all on mobile devices.
is Screen size on a mobile device is
extremely limited, with less width and
more height than traditional computer
monitors. (The view is more rectangular
than square.) Optimize your content and
design accordingly.
j> There is no mouse on the mobile
phone — only up and down arrows, and
at best a touch screen. Adjust your
design to require as little scrolling and
user movement as possible.
V Always validate your Web page code
(numerous validation services are online,
such as the one at http : / /validator .
w3 . org). Mobile browsers are even less
forgiving than traditional Web site
browsers about errors in your code.
f Very few mobile devices support
JavaScript, so don't use it in the mobile
version of a Web site.
V Not all mobile devices support Flash or
other multimedia formats. Use multime-
dia sparingly and make sure to include
links to alternative content for visitors
who may not be able to view these
features.
V Test with mobile phone emulators, such
as Dreamweaver's Device Central (fea-
tured in the first task in this chapter),
and the online emulators available at
http://ready.mobi and http://
mt Id. mobi/ emulator .php.
is Test interactive features on a variety of
mobile phones. If you can't afford to buy
several phones (and who can?), ask your
friends and coworkers to test your site
on their phones.
is Visit stores that sell mobile phones and
ask for a demo of the phone's Web
browser capabilities; then make sure to
view your own site while you're testing
the phone. Although it can take some
time to run around town visiting mobile
phone stores and doing demos, it's a
cheap way to test in a variety of modern
devices, and you might even find your
new favorite phone.
To read more about designing for mobile
devices, check out my book Mobile Web
Design For Dummies (Wiley).
Chapter 10: Testing and Publishing a Web Site
Using the Dreamweaver Link-Testing Features
Stuff you A/eea to
KrtoW
Toolbox:
w Adobe Dreamweaver
w A Web site with linked
pages
Time needed:
About half
an hour
Test, test, and test some more. To help you ensure that all the bells and
whistles on your Web site ring and ding the way they should, a variety
of Dreamweaver features make it easy to test your pages for broken
links and other potential problems. In the task that follows, you find
instructions for using some of these high-powered testing tools on a
completed Web page.
/« Make sure that the site you want to test is
selected and active in the Files panel. (To
open the Files panel, choose WindowOFiles.)
If you haven't yet completed the site setup
process, see Chapter 6 to take care of this
important initial step.
HIES
ASSETS
Q Austin Massage t Local view
£=7
Local Files
Size
1
□ & 5ite - Austin Massage, . ■
□■■■■(Si images
EB--d script
about, html
appointrnents.html
■ [■] Benefits of Frequ ■ . ■
chair_rnassage.html
Client Intake For...
contact ,php
corporate_rewar...
index, html
F
F
F
4KB F
3KB F
621KB F
5KB F
34KB F
6KB F
2KB F
4KB F
rrr
y i .-■ ri r
log.
File Edit View Insert Modify Format Commands
index.html* x
4=MI|'WJd-T??^ styles. ess preload. js
Path: C:\Users\Artesis
,/\ Code 5 P' i,: ^=a!l Desic J n jU Live View
1250 300 1350 1400 450 500 51
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Window Help
New Site...
Manage Sites...
Get
Check Out
Put
Check In
Undo Check Out
Show Checked Out By.,
Locate in Site
Reports...
Synchronize Sitewide...
Check Links Sitewide
Change Link Sitewide
Advanced
Ctrl+Shift+D
Ctrl +Alt+Shift+D
Ctrl+Shift+U
Ctrl + Alt +Shift+U
Ctrl+F8
-
-
2. To test the links in a Web site,
choose SiteOCheck Links Sitewide.
208 Part " : Puttin 9 the Pages Together
D r o pBooks
feature is displaye
he Check Links
yed at the bottom
of the workspace. If Dreamweaver
reports a broken link, like the one
shown here (to the about me . html
file), double-click the filename.
Dreamweaver highlights the corre-
sponding text or image with the
broken link so that you can easily
see where you need to fix the link.
& ■ & >
_ B *
Fill Edit '.liw ln:-trt Madfy Fwmit Lcmmindi all Andiw Hilp
!■ ■ ■■ I ■■ ■■ i ■■ ■■ rn ■ ■! ■■ ■ irn ■ ■! ■■ ■ ■n ■■ ■! ■ ■■ iITm ■! ■ ■■ ■ h ■■ ■ !■ ■■ ■ !■ ■ ■■ !■ ■ ■■ ni ■■ !■ ■ ■■ Hi ■■ i ■■ ■■ I ■■ ■■ i ■■ ■ ■! ■■ ■ ■! ■■ ■ ■!■ ■■ ■! ■ ■■ in ■ ■ h ■ ■■ ■ n ■■ ■ !■ ■■ ■ rrn ■ !■
!■ ■ ■■ ni ■■ i ■■
m,
ossnies
tit
A
m
in ,■■
WET!
HWrffltTIES ■
I < HTH,] Fom* (n
SiCB I [i r.
■
Q 1^ I DPS M-l iM'- :HI f -Iiie hVntiinCui-fum
Ur*.
■» I i= != U II me
Lrt Itn...
I BiWHACjaWKaBlElY lil-t- I! HI v.;...
•Mi
■ ■ ■ -■ i ■.
UToi* h H ru.. : i>tw4 js* n«ot iftom h le-K*^
n Hex Jin H
! I If% fWi fffi! iffi 1^ frftl IfiQ r?ft I??! Iff! frTl ffil 1 1 1 ,
] am a wife, mom. entrepreneur and Has sage Therapist- ] have
a wmdetTuI husband a beau dfu] ctauor cer. My family is The
Merit of m* life. Check out my 3 tab ta learn rmrE.
Having practiced Massage Therapy for the last nine years ]
draw from many different trapes af Massage for each s-e^ sian . L
tailor each Mas-sane sessicn to four specific needs and
concerns. Treatments mav include a b'end of Peep Tissue,
fucustig on the deeper layers of muscle, and Therapeutic
rRi-iprRnn
\\ r"; -,. 1 u Lr : :- ^ BSI a: MH ~ £4C } 4 ire WMan Ejppnai
g=,C3S
E Hunt
□a" hlnno
Urfc at»LtnrtUvJ
D J |=
; = J II Title
"•. • r ■ "i.
31c-i- tVofcjn Lr*:. '"I Arts flee not fojtl rri kicaJ dsKi
^CULTiA.tytirl
CK IBrotHi -. : -i -1
4- You can fix broken links in a
number of ways; the simplest is to
reset the link by following the same
steps you find in Chapter 6 for cre-
ating links. As in the example
shown here, where I'm fixing a link
from one page in a Web site to
another page in the same site, start
by making sure that the linked text
is selected. Then click the Browse
button (the yellow file folder icon
next to the Link field) in the
Property Inspector to locate the
correct filename. (For more
detailed instructions on creating
links, see Chapter 6.)
REFERENCE | VALIDATION [ BROWSER COMPATIBILITY STTE REPORTS FTP LOG SERVER DEBUG |
Show: External Links
(links to Daaes outside site, not checked)
c:i_. Broken Links
Flles IIMI^H
External Links
""** /abou Orphaned Files
http://www.tlcschool.com
□
tj| /about, html
http : II www . mystressolutions . com
/about. html
http://www.conquestmedia.com
7^ /appointments, html
http: //www. conquestmedia. com
~* /chairjnassage.html
http : //www . mystressolutions . com
^ /chairjnassage.html
http ://www . mystressolutions .com
l-l ~~ — ti~l
kM-n./J . A ~i. M ~.*l;
78 Total. 14 HTML. 7 Orphaned 239 All links, 195 OK. 1 Broken. 43 External
5. In addition to identifying broken links to pages within a Web site, the Dreamweaver link report lists
other kinds of links. For example, you can use the drop-down list shown here to view all the external
links, or links in a site that go to other Web sites. This makes it easy to test links to other sites to
make sure that the Web site address hasn't changed. Note that to check external links, you must pre-
view a page in a browser on a computer with an active Internet connection. You also display a list of
unused files in a site by choosing Orphaned files from the drop-down menu. Orphaned files are HTML
pages that aren't linked to any other pages, as well as images and multimedia files that aren't
inserted into any pages in your site.
Chapter 10: Testing and Publishing a Web Site
Setting Up FTP in DreamWeaver
1** — Stuff i/ou —
Need to Know
Toolbox:
w Adobe Dreamweaver
A Web site ready to be
published
A Web server or hosting
service
Time needed:
About half
an hour
Okay, you created a Web site and tested it, and you're ready to upload
it to the Web. It's time to put the Dreamweaver publishing tools to
work. If you're using a commercial service provider, you most likely
need the Dreamweaver FTP features, covered in detail in this task and
the remaining tasks in this chapter.
Note that you must complete the site setup process, covered in the
beginning of Chapter 6, before you can configure the site for uploading.
You also need the following information from your Web hosting service
(find tips for choosing a Web host in Chapter 3):
The FTP host name
& The path to the Web directory (optional but useful, and should
look similar to this: /web/htdocs / j cwarner)
An FTP login or user name
An FTP password
After you gather all your FTP information and complete the site setup,
you're ready to access the Dreamweaver publishing tools and prepare
the program to upload your Web site. In this task, you set up
Dreamweaver to connect to your server via FTP, a process you need to
do only once for each site you work on. In the next task, you use
Dreamweaver to upload pages to your server by using the connection
you establish in this task. Follow these steps:
View Insert Modify Format Commands Site Window Help
treatments. html x
9 styles. ess preload. js
4 Split
h: C:UJsers\Artesian Me
_j\ Design Jfj Live View
250 ,
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
300
350 ,
400 ,
450 ,
7
New Site...
Manage Sites...
Get
Ctrl+Shift+D
Check Out
Ctrl* Alt +Shift+D
Put
Ctrl+Shift+U
Ctrl+Alt+Shift+U
Check In
Undo Check Out
Show Checked Out By...
Locate in Site
Reports...
Synchronize Sitewide...
Check Links Sitewide
Ctrl+F8
Change Link Sitewide...
7. Choose SiteOManage Sites to open the
Manage Sites dialog box. Alternatively,
you can choose Manage Sites from the
Site drop-down list in the Files panel.
Manage Sites
Artesian Media 4-09
Austin Massage
Authors Unconferece
Backgrounds
California Wildlife Photograph
ChocolateGarneRules
Davi Design Studio
David LaFontaine
DigitalFamily 1-09
Eclectic Film Sales
Experimental Musical Instrum
Fallow Deer
Flaminaos
Done
New...
Edit...
Duplicate
Remove
Export...
Import...
Help
2. In the list of defined sites, select the
site you want to publish. Then click
the Edit button.
210 P art " : Putting the Pages Together
DropBacte
Romrkto Inf a rota
ced tab at the top of the Site
box, and then select the
Remote Info category from the left side.
Site Definition for Austin Massage
Basic
Advanced
Category
Local Info
Testing Served
Version Control
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
Remote Info
Access: None
Site Definition for Austin Massage
Basic
Advanced
Category
Local Info
Remote Info
Testing Server
Version Control
CloakJng
Design Notes
File View Columns
Contribute
Templates
Spry
Remote Info
Access:
None
None
FTP
K
Local/Network Lfl fl
WebDAV
RDS
Microsoft® Visual SourceSafe®
4- Click the arrow for the Access drop-down list
box, and then choose the publishing option best
suited to your Web server and development
environment. If you're using a commercial Web
host (the most common option for small do-it-
yourself sites), choose FTP. If you're working at
a university, a large company, or an organiza-
tion that has its own Web servers, refer to the
nearby sidebar, "The multiple Dreamweaver
publishing options," to understand your choices
here, and check with your system administrator
to find out which option is best for your system.
Remote Info
Access:
FTP
FTP host: ftp.austinrelax.corn
Host directory: /web/austinrelax/
Login: austin
Password:
Test
|] Use passive FTP
5. In the FTP Host text box, type the host name of your Web server. In
my example, I used ftp . austinrelax . com. In the Host Directory
text box, type the directory on the remote site in which documents
visible to the public are stored. In my example, I used /web/
austinrelax/. The information you enter in this field depends
on your server. In some cases, you can leave the field blank if you
log in directly to your site; in other cases, you use a different path,
such as users/mysite/domain. Check with your service provider
or site administrator to find out how your server is set up.
Chapter 10: Testing and Publishing a Web Site 211
DropBooks
6. Enter your login name and password. Web services require a username
and password to gain access to your Web server to ensure that you're
the only person who can make changes to your Web site. If you select
the Save check box, Dreamweaver stores the information on your local
computer and you don't have to retype it every time you log in to your
Web server. Click the Test button to make sure that you entered every-
thing correctly. If there are no problems, Dreamweaver responds with
the message Adobe Dreamweaver CS4 connected to your Web
server successfully.
7- Select the Use Passive FTP option or the Use Firewall
option only if your service provider or site administrator
instructs you to do so. If you use a commercial Web
hosting service, you shouldn't need to select any remain-
ing options in this section of the dialog box. Select the
use Secure FTP check box if you have a secure Web
server, but be aware that not all hosts support secure
FTP. If you select this option and see an error message
when you press the Test button, deselect the option and
test again.
O Use passive FTP
□ Use IPv6 transfer mode
□ Use firewall
□ Use Secure FTP (5FTP)
Firewall Settings..,
1¥
Server Compatibility...
The multiple breamuteaVer publishing options
In the Remote Info category of the Site
Definition dialog box, you find the fol-
lowing options when you click the Access
drop-down list. The following list briefly
describes when you should select each
choice. (If you're using a commercial Web
hosting service, the FTP option should be
your best choice.)
W None: When you aren't uploading your
site to a server or when you aren't yet
ready to fill in these settings.
FTP: When you're using the built-in
Dreamweaver File Transfer Protocol fea-
tures, which are covered in detail in the
following section. You're most likely to
need these settings if you're using a
commercial Web hosting service.
w Local/Network: When you're using a
Web server on a local network, such as
your company or university server. For
specific settings and requirements,
check with your system administrator.
w WebDAV (Web-based Distributed
Authoring and Versioning): When
you're using a server with the WebDAV
protocol, such as Microsoft IIS.
v RDS (Remote Development Services):
When you're using ColdFusion on a
remote server.
v 0 Microsoft Visual SourceSafe: When
you're using Microsoft Visual
SourceSafe. (This option is available
only in Windows.)
Part II: Putting the Pages Together
Remote Info
Site Definition for Austin Massage
Cloaking
Design Notes
File View Columns
Contribute
Templates
Spry
FTP
lost: ftp.austinrelax.com
Host directory: /web/sites/htdocs
Login: austin
Test
Password: ••••••
J Save
Use passive FTP
0 Use IPv6 transfer mode
1 I Use firewall
□ Use Secure FTP (SFTP)
Firewall Settings...
Server Compatibility...
[71 Maintain synchronization information
Automatically upload files to server on save
Enable file check in and check out
OK
3
Cancel
Help
& Select the Maintain Synchronization Information check box; Dreamweaver then automatically keeps
track of any changes you make to pages on your local computer that haven't been uploaded to the
server. Note: I never recommend that you select the Automatically Upload Files to Server on Save
check box because I think that you should test your pages on your local computer before you pub-
lish them to the local site. Leaving this box deselected prevents the possibility of accidentally
uploading errors automatically every time you save a page on your local computer. The Enable File
Check In and Check Out option opens an advanced feature that can be used to track files when multi-
ple people are working on a Web site. You can find more information on this and other site manage-
ment features in my book Dreamweaver CS4 For Dummies (Wiley).
Click OK to save your Web server information settings and close the Site Definition
dialog box. You're ready to start using the Dreamweaver FTP features, covered in
the next section.
If you try to connect to your server and see the message An ftp error occurred, it usually means that
you entered characters incorrectly. Be very careful as you type your username, password, and other information
because most servers are case sensitive and require that these fields be filled in with the exact host, directory,
login, and password information. If you still have trouble, contact your service provider or site administrator to
ensure that you have all the correct information for connecting to your server. Setting up all this information cor-
rectly the first time can be tricky, and each service provider is different.
Chapter 10: Testing and Publishing a Web Site 2/3
Uploading Files With the breamvtieatfer
stuff you
Need to Know
Toolbox:
Adobe Dreamweaver
A Web site with linked
pages
v 0 Access to a Web server
Time needed:
About half
an hour
After you enter all your Web server and login information into
Dreamweaver (as you do in the previous task), you can upload files to
your server and retrieve them at any time by using the built-in FTP
capabilities of Dreamweaver.
To transfer files between your hard drive and a remote server, follow
these steps:
7. Make sure that the site you want to upload is
selected and visible in the Files panel and
that you entered all the FTP settings
described in the previous section. Then,
in the upper-left corner of the Files panel,
click the Connects to Remote Host icon.
(It looks like a plug and an outlet.)
HIES
ASSETS
(r^h Austin Massage
Local
view
% c
LocIk-^Files
£3
■i
■a
images
script
about, html
appointments, html
Benefits of Frequ...
chair_massage.html
Client Intake For...
contact ,php
corporate_rewar...
index.html
rrr
F
F
4KB F
3KB F
621KB F
5KB F
34KB F
6KB F
2KB F
4KB F
.- 1 .-■ i-i i-
►
Hog...
If you're not already connected to the Internet, the Connects to Remote Host icon attempts to start your dialup
connection. If you have trouble connecting this way, try establishing your Internet connection as usual to check
e-mail or surf the Web, and then return to Dreamweaver and click the Connects to Remote Host icon after
establishing your Internet connection. When your computer is online, Dreamweaver should have no trouble
automatically establishing an FTP connection with your host server.
^ 7 P art " : Putting the Pages Together
DropBooks
2, When the connection is established, the blue Connects
to Remote Host icon changes to look like the plugs are
connected (or, dare I say, plugged in). After the connec-
tion is established, you can view the files and folders on
your Web server by choosing Remote View from the
drop-down list in the upper-right corner. (It's shown
open in this figure.) Using the drop-down arrow, you can
easily switch between Local view (displays the files and
folders in the root site folder on your local hard drive)
and Remote view by selecting each one in turn.
HIES
ASSETS
(r^h Austin Massage
Local view
& c
Local Files Testing server
B & Site - Austin Massag* e .P ository vi f w
images
F
script
F
i u
about.html
4KB F
i H
appointments.html
3KB F
! a
Benefits of Frequ...
621KB F
i 15)
chair_massage.html
5KB F
: a
Client Intake For...
34KB F
! "il
contact ,php
6KB F
corporate_rewar...
2KB F
i H
index.html
4KB F
l:_ 1 . _ L I 1
.- 1 .-■ i-i i-
rn
File activity complete
[Log,
Dw
File
Edit View Site
DESIGNER
□
_ n
Show: Q Austin Massage
\K\ c
El aS>
0 ft
Remote Site
[ Remo
Size | Type
Modified
/austinrelax/
Local Files
SizeJjVpe
Modified
O Site
m Q
■
■
-ft
-"ft
_
-11
U
- Austin Massage...
images
script
about.html
appointments.html
Benefits of Frequ...
chair_massage.html
Client Intake For...
contact. php
corporate_rewar...
index.html
links.html
map. html
new_clients.html
policies, html
rates.html
styles, ess
treatrnents.html
Folder
Folder
Folder
4KB Firefox D.
3KB Firefox D.
621KB PDF File
5KB Firefox D.
34KB PDF File
6KB PHP File
2KB Firefox D.
4KB Firefox D.
6KB Firefox D.
7KB Firefox D.
8KB Firefox D.
4KB Firefox D.
4KB Firefox D.
7KB CSS Doc.
7KB Firefox D.
3/1/2009 3:39 PM
8/1/2009 10:23 Ah
8/1/2009 10:21 Ah
2/12/2009 9:08 PN
2/12/2009 9:08 Ph
2/10/2009 6:30 PI*
2/12/2009 9:08 PI*
3/4/2009 7:46 PM
2/12/2009 9:09 PI*
2/5/2009 9:20 PM
8/1/2009 3:39 PM
6/7/2009 6:50 PM
4/1/2009 6:01 PM
2/12/2009 9:09 PN
4/6/2009 9: 14 PM
3/22/2009 l:17Pr*
2/7/2009 10:52 Ah
2/12/2009 9: 10 Ph
_Loo,
3- To see both Local and Remote views simultaneously, expand the Files
panel by clicking the Expand icon, in the upper-right corner of the Files
panel. With the panel expanded, you can upload and download files by
dragging them from one pane to the other. To minimize the Files panel,
click the same icon again. In this figure, the Files panel is expanded and
the cursor is hovering over the icon, which is labeled Collapse when the
Files panel is expanded.
Chapter 10: Testing and Publishing a Web Site 2
Show: Q Austin Massage
Remote Site
File Edit View Site
- 0
DESIGNER
_ n x
Size|Typc
Modified
^^^relax/ _
Books
D... 8/1/2009:
^ 1 local items selected totalling 3694 bytes.
*4 '
i2> l_OJJ
Local Files
i
Size | Type
Modified
H Q Site - Austin Massage. . .
Folder
8/1/2009 3:39 PM
images
Folder
8/1/2009 10:23 Ah
s ica
script
Folder
8/1/2009 10:21 Ah
about.html
4KB Firefox D..
2/12/2009 9:08 Ph
1B
appointments.html
3KB Firefox D..
2/12/2009 9:08 Ph
-
Benefits of Frequ,..
621KB PDF File
2/10/2009 6:30 Pf>
chair_massage . html
5KB Firefox D..
2/12/2009 9:08 Ph
■
Client Intake For...
34KB PDF File
3/4/2009 7:46 PM
contact, php
6KB PHP File
2/12/2009 9:09 Pt>
-
corporate_rewar...
2KB Firefox D..
2/5/2009 9:20 PM
index.html
4KB Firefox D..
8/1/2009 3:39 PM
links.html
6KB Firefox D..
6/7/2009 6:50 PM
map. html
7KB Firefox D..
4/1/2009 6:01 PM
*S
new_clients.html
8KB Firefox D.,
2/12/2009 9:09 Pt>
policies.html
4KB Firefox D..
4/6/2009 9: 14 PM
rates.html
4KB Firefox D..
3/22/2009 1:17 Piv
styles, ess
7KB CSS Doc...
2/7/2009 10:52 Ah
treatments.html
7KB Firefox D..
2/12/2009 9: 10 PI*
Log- 1
4. To upload a file (transfer a file from
your hard drive to your Web
server), select the file from the
Local View panel (which displays
the files on your hard drive) and
click the Put Files icon (the up
arrow) in the Files panel. If a dialog
box appears with the message Put
dependent files, choose No to
upload only the selected file.
Choose Yes, and Dreamweaver
uploads the selected file, plus any
files that appear within that file,
such as images or multimedia files
that are inserted into a page.
5. Files are copied to your server
when you transfer them, leaving
the file on the local computer
untouched. You can select multiple
files or folders to be transferred
simultaneously.
Dw
File Edit View Site
DESIGNER
_ n x
Show:
O Austin Massage
□ C0 |(H)s# B
Remote Site
Size
Linus
Modil
B £p /austinrelax/
EE l£a images
Folder
8/1/2C
EB Q script
Folder
8/1/2C
T] about.html
4KB
Firefox D..
2/12/2
~*~ appointments.html
3KB
Firefox D..
2/12/2
""* index.html
4KE
Firefox D..
8/1/2C
Local Files
Size | Type
Modified
B Q Site - Austin Massage. . .
EE images
EE 13) script
about.html
appointments.html
Benefits of Frequ. . .
~* chair_massage.html
ackground File Activity - Austin Massage
Putting file Benefits of Frequent Massage and Bodywork.pdf • 524288 of G
Details
Save Log..
Hide
Cancel
styles, ess
treatments.html
Folder
Folder
Folder
4KB Firefox D.
3KB Firefox D.
621KB PDF File
5KB Firefox D.
~>4KB PDF File
6KB PHP File
2KB Firefox D.
4KB Firefox D.
6KB Firefox D.
7KB Firefox D.
8KB Firefox D.
4KB Firefox D.
4KB Firefox D.
7KB CSS Doc.
7KB Firefox D.
^ appointments.html
8/1/2009 3:39 PM
8/1/2009 10:23 Ah
8/1/2009 10:21 Ah
2/12/2009 9:08 Ph
2/12/2009 9:08 Pf>
2/10/2009 6:30 Pt>
2/12/2009 9:08 Pt>
3/4/2009 7:46 PM
2/12/2009 9:09 Pf»
2/5/2009 9:20 PM
8/1/2009 3:39 PM
6/7/2009 6:50 PM
4/1/2009 6:01 PM
2/12/2009 9:09 Pt*
4/6/2009 9: 14 PM
3/22/2009 1:17 Pf*
2/7/2009 10:52 Ah
2/12/2009 9: 10 PI*
When you copy files to or from your server, the files you're transferring overwrite the files already at the destina-
tion. Dreamweaver notifies you about the overwriting if it notices that you're replacing a newer version of a file
with an old one, but it's always a good idea to double-check before you overwrite a file.
210 ^ art "■ P utt ' n 9 Pages Together
folders (trans-
r om your Web
server to your hard drive), select
the files or folders from the Remote
Site panel (which displays the files
on your server) and click the Get
Files button (the down arrow) in the
Files panel. The files are automati-
cally copied to your hard drive
when you transfer them.
Dw
File Edit View Site
DESIGNER
Show: Q Austin Massage
Remote Site
BQ El I OB if &
I Size] Type
|Modil
B /austinrelax/
El images
EE Q script
about.html
••^>| appointments.html
Benefits of Frequent Mas.
^7 chair_massage.html
Client Intake Form.pdf
^7 contact, php
^] corporate_rewards.html
index.html
links.html
••^) map. html
new_clients.html
^ policies.html
rates.html
styles. ess
~" treatments.html
Folder
Folder
4KB Firefo>
3KB Firefox D...
621KB PDF File
5KB Firefox D...
34KB PDF File
6KB PHP File
2KB Firefox D...
4KB Firefox D...
6KB Firefox D...
7KB Firefox D...
8KB Firefox D...
4KB Firefox D...
4KB Firefox D...
7KB CSS Doc...
7KB Firefox D...
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
1/2C
Local Files
1
0
E £3 Site
EH IS> images
EE lS> script
about.html
°*7 appointments.html
Benefits of Frequ. . .
chair_massage.html
Client Intake For...
contact. php
~'_ corporate_re war . . ,
index.html
~*_ links.html
map. html
new_clients.html
policies.html
~_ rates.html
styles, ess
treatments.html
Size | Type Modified
Folder
Folder
Folder
4KB Firefox D.
3KB Firefox D.
621KB PDF File
5KB Firefox D.
34KB PDF File
6KB PHP File
2KB Firefox D.
4KB Firefox D.
6KB Firefox D.
7KB Firefox D.
8KB Firefox D.
4KB Firefox D.
4KB Firefox D.
7KB CSS Doc.
7KB Firefox D.
8/1/2009 3:39 PM
8/1/2009 10:23 Ah
8/1/2009 10:21 Ah
2/12/2009 9:08 Pr>
2/12/2009 9:08 Ph
2/10/2009 6:30 PI*
2/12/2009 9:08 Ph
3/4/2009 7:46 PM
2/12/2009 9:09 PI*
2/5/2009 9:20 PM
8/1/2009 3:39 PM
6/7/2009 6:50 PM
4/1/2009 6:01 PM
2/12/2009 9:09 Ph
4/6/2009 9: 14 PM
3/22/2009 1:17 PI*
2/7/2009 10:52 Ah
2/12/2009 9:10 PI*
^ ' Jaustin relax?
After you upload files to your server, test your work by using a Web browser to view the pages online.
Sometimes, things that look and work fine on your computer don't work on the server, so you should always
test the pages on the server right away.
Using dedicated FTP programs
If you prefer to use a dedicated FTP pro-
gram rather than the built-in Dreamweaver
features, you can download one of these
popular FTP programs for the Mac or PC:
^ FireFTP: A Firefox add-on that you can
download for free from http://
f iref tp . mozdev . org.
WS_FTP: On a PC, you can find this pro-
gram with the unusual name at www.
ipswitch . com.
is CuteFTP: Download this Windows pro-
gram from www . cutef tp . com.
w Fetch: If you use a Macintosh computer,
check out this program, available at
www. f etchsof tworks . com.
is Transmit: You can download this pro-
gram, also for the Mac, at www. panic .
com/ transmit.
v* FileZilla: This is a great open-source FTP
program available for PC, Linux, or Mac
at http : / / filezil la-pro j ect . org.
Chapter 10: Testing and Publishing a Web Site
Adding Google Analytics to your Site
Need to Know
Toolbox:
A web site where you
want to track traffic.
A Web browser, such as
IE, Safari, Chrome, or
Firefox.
Time needed:
About half
an hour
One of the greatest advantages of publishing information on the Web is
that you can track how people use that information, how they find it,
where they come from, and more. There are many ways to gather data
about visitors to your Web site. Most Web hosting services provide
access to some kind of server logs that include basic information, such
as how many people visit your site every day, week, month, or year.
If you want more information, consider using one of the third-party statis-
tic services, such as Google Analytics, covered in the next task, or any of
the similar services included in the sidebar, "Using online Web-traffic ser-
vices." Google Analytics is the most popular Web traffic-reporting soft-
ware available on the Web today. And it's no surprise. Google Analytics is
powerful, comprehensive, remarkably easy to use — and free!
Follow these steps to add Google Analytics to your site.
7. Sign up for an account at Google
Analytics (www. google . com/
analytics). If you already have a
Google account, such as one you
use for Gmail, just click the big
blue Access Analytics button, and
you can use your existing account
as you sign up for Analytics. If
you're new to Google, click the
Sign Up Now link and create a new
account when you sign up for
Analytics.
Google Analytics usEn 8 .,h
HOMt
J
PROOWCT 1 SUPPORT
EDUCATION fHOG
Enterprise-class web analytics made smarter
friendlier and free
Googk? Analytic* n the -< •-.< •* \--- —< analytic* wlulcnthat g«s you rich njightt
mo your we6«n* traffic and marketing efecirveneee Powerful, leno e and eaey-to-ue©
features now let you see end analyze jolt lieftc data In an entrdy new *»■/ wth Gooje
Aruiytict, yoi/re moia prapaied la wnte better-targeted edt, strengthen your marketing
nrtietwas and create ktfat tomsrting »»r:rta :
Accts Analytics
N»w to ijoorjk? Aruljic*'
Sign Up I
ft*
tfn/ejIC 1 0 «■*<** N 101 ION
Isolate and anah/ie subsets
of j rxt trade with a fad
imoradua tagmenl ouiMer
CUSTOM REPOHlWi,
Use the rjiag and diop
ricrlace to tee inkmnian
atacrly the way you warn to
see t
► insights using an
fiteiactne muttdmeriaional
■jt\ ■•■ ■: tool
.M A .11 I LIHNf*
i nrmnrT toio
fifXiGt b awai mcs m nr.
Google Af^^cs
Product
5»innai» for Sue era m Vermont —
wwjds.Ariajvilcs.webete
Optimizer a-^ ^ciairi-q ■ 7 Ql/SX©
h*?*CCOEr:«'8C>d<' TfrOH For
r.iL r, r-A-HMi-c.i \\*r-n
Pui jour mebsne to the tea Y out Google
Anerrtics login gr«& you instant access
lo cur aster product , Google Website
Gttimet. Test wheh layouts . headings,
imaojc-i and more ccrmit the most rartors
Part II: Putting the Pages Together
Improve your site and increase marketing ROI.
MIVM CO* wtt-tfw? «rW
Sign nto Google Aruljlcs with four
Account
EtdbI
v gti> signed in
Sjg» Up Ntw.
> JW? -to..* | ArarKc Hone | rtntec< &eiv<ct | Pii.«Cf Hctr ICcrtaotia | «n»iQic8K*inEn0eM
2. After you set up an account, just
enter your user name and pass-
word to access your account.
When you log into Google
Analytics, if you already have
sites set up with tracking, you'll
see them listed on the Overview
page. To set up a new site, click
the Add Website Profile link at
the bottom of the Overview
page.
3- On the Create New Website Profile
page that appears, select Add a
Profile for a New Domain if you're
setting tracking for the first time, or
select Add a Profile for an Existing
Domain if you want to track a
domain with a second profile. Enter
the URL of the site you want to
track, select the country and time
zone from the drop-down lists, and
then click the Finish button at the
bottom of the page.
Google Analytics
Analytics Settings | View Reports:
Click to select Website Profile ▼
My Analytics
Analytics Settings > Create New Website Profile
Create New Website Profile
Choose Website Profile Type
Please decide if you would like to create an additional profile for an existing domain, or create a profile to track a new domain.
'*) Add a Profile for a new domain
0R _ Add a Profile for an existing
domain
Add a Profile for a new domain
Please provide the URL of the site you would like to track,
http:// ▼ mobilewebdesignblog.com
Examples: www.mywebsite.com
Note: You can add more profiles after you add this profile
Time zone country or territory: | United States
Time zone:
(GMT-07:00) Pacific Time
^Cance^J I
Tracking Cod*
Teaching Sl^ni^ Inf n rn-Wir r
Profile rjarrit mnbilcwcbde-sinnblnn enm
Weealte URL htpflniabiewebdesiflii&ioA t em
Web FropHltMD (S : UW-393Z33IS-(5
* TiKkng Hoi hd^d (Lad checked: Aug 1 , 2DD9 4:33:27 PM |
Traiklncj Statue: Ths Onngle WiaWcs tracking rode has nol bean detected on munwnaiB'B home page. Far friSsflca
to hnrcon, yeu oryaur wn sdwirnsirstor must add We cade 1c each p»ae of yeur *iet)5lte.
Inst - j n ii^ 1nr mlihrc rr.' ekire
Lnjcasv' iraskina (Jode lurch n.jsl
Cuity :t e 'lIIl w nil Klu.-h inCu L-™ y •■><M"- W YJ'i wa-iHu U ufk ir iirirci^try Imfui e [he /J:oilv.
rfiijui iie has dynamic Lonltntvou can u e-s a (amnion Include ai a template. Learn Mora
Uin Ihls IracMngcodH lu gin access Id a wide- rangu m'BHCIIing nowftnlrax as Ihuubucurnu atailabln
4- Google Analytics provides you with two options:
New Tracking Code (ga . j s) or Legacy Tracking
Code (urchin . j s). I recommend using the new
tracking code so you have access to the latest
and greatest new features that aren't available
via the legacy code. Select the entire code block
in the input box and copy it. Then click the
Finish button at the bottom of the page to return
to the Overview.
Chapter 10: Testing and Publishing a Web Site 2 / ^
To add the code to a page in Dreamweaver, click
(iiltan^ the top left of the workspace,
|anj j^ilslrp^ OTyn to the bottom of the Web
page where you want to add the code. With the
cursor or mouse, select the line immediately
before the </body> tag and then press Enter
on your keyboard. Choose EditOPaste, and the
previously copied tracking code from Google
Analytics is added to your Web page. Save your
changes.
"•'J J 'J - ILL'- I. - ..•'."JI'.-'J (.'ILL'
'i :d-'baiS" href." rlmcjyoflfMjTe. hrtn] '
■:i SJ-"Tiaill n lu£ef~1u±u clitkLj . Iicri]"
Tub: Au*n r*fc Mksjjt | *urhn fj*. fa
: :'<i:'j:- ■.• ■- J
*d:v id-"di^Ldnc"X/LliTfT
■ iaF ,, utn-tn«rnTics ,, v^, , 4i^ii
■^JlT lJ-"LialLL-3nC/mml
■ inVEnntai'Ml
ll <LUV ld=" LuLI J lJj l*X/[llTC3l
■ -Cdiv id-"hntLjE,:- | j' j.J J Injn md.f:f,tmt * iUUb A'jLrLjr, l! ■!«*:. AIL cl-jI-.Lt cuicvid. Uibxiti by
I Ca tiEcC=Tittaj ; yynw. ciojurnscudia. cotT ■ 1 tEpEt="_)ilanl<' , >Conqii»c ■PlBrilaiQ'aX/LllsM
In
ing code — >
("btHfs j ' « dflcuiueEit.locajciaiLipia tocoJJ : Tuccja i J./aoL." i Icqp i //nro, "> j
HA3£S{1G4 "iiCaCIlh L .SEC- 1 ' + yyjjrluj L .4- "aOOOlH-LffifllS-Ll.CS.CKl.'Hft- 1
cript 1 t3E*3C^Bi;iipt%3e , > > j
XL/JifVniGLi
■ ■_oflt-_grtTtBClieiC , U&-TteDM-B") ;
Tin
Gito|Cfn?
./llnis
*LlL>Ki
F.1h.w
TfcMllQplCH
DlrionLlpUn
ft Took
-1 Sett us
-1 ■ .■.:;>. "Ik:.:
th~±«_ta*._ift«-_hrti]i; I j
I Mil bD urtiLn plLdm lUch ctic*. far tun cm In tUi f CLi:
i ifi_fiKtri)i
<io-ipt byp<- -tin .'JiuiBlrl'i
■■> (1.JHK1 ■ L. i.rtS ■
■h11p:Jj— ».■);
EDoacit.>rlt((mtf(ipty 'ECscrlnt 5rr>" ► f&liHtsi * "fit«l«-
m»lytdci.o«.-i».Jr' t^B^'tu* ijmiicript SHSUC^icrtpQjr" I J;
^.■ic.Li r-
•:i-:rCat typi- *tia.l .'Jima-lpt'*
try i
lit □mlrcfcir ■ jit.jrtTricK«-|-lj* iJS2Sa4-a"J;
> UtEt(BT) r|r_.|D-[rt^
Trrerro Tic-s
Anjhl'H Pago TtrnplatB
intHas.ftV'/
ConntflK
":>.;>-•. 1 ■ Tsmnlatn Pago
Tun Dirts
i ajct nm_t vmp Li tm p hp 1
Fnrjter I fac*?r nhpj
HoorJor lOsrjRr.prin)
N a n Ln dew To n tf-rtr
Ma Srtf bet P&jt T«i[lBtt
•;n--_rriF*-jiT php 1
Thvrw Functmi
(njMCCrt'ri 4Xi|>;<
6. To add Google Analytics code to a WordPress blog, log into the
Administrative tools for your blog (as if you're going to add a new post)
and then choose Appearance from the left side of the Dashboard. Under
Appearance, choose Editor; then, on the right side of the page, under
Templates, choose Footer (footer . php). Scroll down to the bottom of the
page code; just above the close body tag </body>, paste the code from
Google Analytics. Click Update File, and all the pages in your blog will be
tracked automatically.
If you use Dreamweaver's . dwt template feature in your Web site, add your Google Analytics to the template
in an uneditable region, and it will automatically be added to all the pages created from the template. See
Chapter 6 for more information on templates and adding code to your pages in Dreamweaver.
Part II: Putting the Pages Together
Usinq oniim Web-traffic services
Drop 3qoJ
gle Analytics is the most pop-
ffic service, there are several
alternatives, including:
Clicky (www.getclicky.com). Clicky is a
hosted, real-time Web analytics service
that provides statistics as they occur (unlike
most other Web site statistics services).
Clicky focuses more on current trends as
opposed to historical data, which is also
available. Clicky offers both free and paid
services, and most noticeably offers a
developer API, Twitter analytics, and dedi-
cated mobile and iPhone versions. Clicky
also works on browsers without JavaScript
enabled. None of these services are offered
by Google Analytics.
Yahoo! Web Analytics (http://web.
analytics.yahoo.com). Yahoo! Web
Analytics was created by IndexTools, a lead-
ing provider of Web analytics software that
was acquired by Yahoo!. Data is collected
in "near" real-time, which means most data
is available within minutes or seconds of a
Web site visit. Yahoo! Web Analytics is free,
offers customizable dashboards, segmenta-
tion tools for data analysis, and campaign
management features similar to Google
Analytics.
AWStatS (http : / /awstats . sourcef orge .
net). AWStats is a free, open source pro-
gram that you can install on your Web
server. If you prefer to keep all your stats on
your own server, you may prefer this option
over Google Analytics and other online ser-
vices. This program generates advanced
Web, streaming, FTP, or mail server statis-
tics with great graphics. Setting up AWStats
is a bit more complicated than using a ser-
vice like Google Analytics because you need
access to the Web server log files and spe-
cific scripts on your Web server. AWStats
offers data similar to Google Analytics, but
the presentation isn't as nice.
Piwik (www.piwik.org). Piwik is a PHP/
MySQL software program that you down-
load and install on your own Web server.
Piwik positions itself as the open source
alternative to Google Analytics. Piwik takes
about five minutes to install, and then you
copy and paste JavaScript code on Web
pages you want to track, much like you do
with Google Analytics. The graphs, presen-
tation, and navigation of Piwik are more
polished than AWStats, but still not as
advanced as those at Google Analytics.
DropBooks Part 111
Going Web 2.0
The 5 th Wave
By Rich Tennant
"Asa vieb si-be designer I never thought I'd
sag this, but I don't think your site has
enough "bells and -Whistles.*
DropBooks
Chapter 11
DropBooks Designing a Blog
It was only a few years ago that blogs (short for Web log) were
considered the wild and crazy new kid on the block. Next thing,
it seemed like everyone had a blog. And most people didn't seem
to know why they had a blog — they just knew that everyone was
saying that you had to have one.
After a few introductory posts to play with this new toy, statis-
tics from the blog search engine Technorati show that about 95
percent of people abandoned them. And that's a shame because
blogging tools can be used for so much more than some lonely
14-year-old's gushing paean to sparkly vampires or a basement-
dwelling conspiracy theorist warning about alien mind-control rays.
Savvy technology shoppers read blogs like Gizmodo (http : / /gizmodo . com) and
Engadget (www. engagdget . com) to figure out if the newest techno-toy lives up to
the hype. Dooce (http : / /dooce . com) and Suburban Turmoil (http : / / suburban
turmoil . blogspot . com) write about motherhood and child-rearing issues in a
laugh-out-loud voice. Deadspin (http : / /deadspin . com) and Total Pro Sports
(www. totalprosports . com/blog) cover the stories behind the stories on the
sports page.
At its heart, blogging software allows you to post information to the Web in a quick
and easy way. After you have the blog set up, all you really have to do is type (into
the right boxes) what you want the world to read, click to select multimedia assets
(photos, videos, audio files), and click the Publish button. The blog displays the
content in reverse chronological order, sorted by category or date, and allows
readers to leave comments or trackback links to add to the discussion with the
writer or other readers. The format of the site, after it's set, doesn't change. That
is, you don't have to choose how many columns of information you want, what the
background color is, what the fonts are, or any of the other variables to designing
a Web page.
In this chapter, I'll demonstrate how to use WordPress, which is a sophisticated
blogging tool that can grow with you as you get more comfortable with the
blogosphere. WordPress is free to use, and comes in two "flavors." You can get
free hosting at WordPress.com, or you can download the software package from
WordPress.org and install it on your own server. Each approach has advantages
and disadvantages. I start with the simplest approach of having someone else host
it for you, and then take a look at how to take total control of things yourself.
Tasks Performed in
This Chapter
Starting a blog with
WordPress.com
Customizing your blog
template to match your
content
^ Writing and styling posts
with panache
Part III: Going Web 2.0
Starting a Btoq at WordPressxom
st u ft you
Need to Knou)
Toolbox:
An updated Web
browser, such as
Internet Explorer 8.0 01
Firefox 3.5
An e-mail address
Time needed:
Less than
half an hour
Your blogging software options are as numerous as the function keys at
the top of your keyboard, so how do you choose one service over
another — or know what they do in the first place? Although I can't help
you with your function keys, blogging software is another matter: One
of the quickest and most flexible services is available at WordPress.com.
WordPress has practically become the industry standard blogging tool
in the last couple of years because the open-source community has
dedicated itself to developing thousands of themes and plug-ins to
allow blog owners to customize and extend the basic blog concept in
almost infinite ways.
If you aren't sure that you want to blog or you're thinking of using other
software down the road (or you're just curious), WordPress.com is an
excellent place to become familiar with how blogging software works,
while offering you almost endless possibilities to expand beyond simple
blogging to running a sophisticated e-commerce site or database-driven
video-hosting service.
In this step-by-step task, you can see how easy it is to sign up for a blog
and get started:
7. Open your Web browser, point it
to www . wordpress . com, and
click the Sign Up Now button.
WOftTiPBF.SS.00M
Freshly
Pressed:
cnmm ■ its . •& 37, fiJJ , M J
CJamts YOU Csn Play rcr
Free: Story
THE GUTTER
ZED
Fnitth
Express yourself.
Start a blog.
Bpmi? joik Phitoirartw wtiktr... fcsJI strengthens
A Mew 7 wis Tc brC''A'n bjp M-ave-up Mars! , ■ - vfinqpi-
Lunthec E^j»e-Ljner
MSpani Blog | Mm tts
Ecc Geometric in the Jungle -
En n h in [I r.g E <J t"
i'Vinni hold V:-i:rU*s \
Winn:nj Ceo I Mcti F-ointj
Willi tolm F j'Ii^ih litKudi
In wccrdF, jcul haws blogwti-'
arrumq rree founts Ike
: :: ■■ i ' j-c..L, <y*er
dsV) StujilviwYtedirs:
* hawrraiytMN ere, *tan titfn
umlrg hn^ ^ikhpcali *"■ rnii
BtpJar, wMKWirti winti m|m nmi
i 11 id i u sin ti-i e»j i hi 1 11
YHJ IK (li>ll>>
!h* bah bJymji
nlngiMti ikt ID
ii i.iFrt kiHira rang ri) tan
arakisnaaj ta hn b £iev, ardvefj cm
r*'in tiMnwmttians nit*.
A icq 'A;, oa ore
Get vour own WordPress.com account in seconds
Fill oul this on»-st«p form and youi ba Moggfng seconds laid
tollywood Bartender
Pattword
UH iino »id lowsi «w ctiM^rfcrr. numt»i» >id wmbrts tit >19*'«f inww
Go oo
2. In the sign-up page, type the name you want to
use in the Username field. This can be your
name, an online identity (handle), or the name
you would like for the blog. In this case, I used
HollywoodBartender. Next, type a password.
WordPress advises users to choose a password
that mixes uppercase and lowercase characters
as well as numbers and symbols. An example of
this kind of mixture would be P@ssW0rd789.
Retype the password in the Confirm box.
Chapter 11: Designing a Blog 223
on nooteslolliis acd ate e e triple chec« n
.egal flotsam
17 i hswe r*sd and agree 10 Itie T»*rmanna temis or service
Girnme a hlagl (Like username wardpress.com)
> Just 3 username, please.
rii!>!i
3- In the next box down, type in your e-mail
address. Like the online warning says, triple-
check that you have the spelling correct. If
you ever forget your password, a new one
will be e-mailed to this address. You can use
your existing e-mail account; or, if you want
to establish an entirely new identity just to
deal with your blog, you can create a new
e-mail identity at a free e-mail site. Make sure
that the I Have Read and Agree to the
Fascinating Terms of Service check box is
selected. (Please click the link and do read
the terms of service before agreeing to
them.) Select the Gimme a Blog! radio
button, and then click Next.
4- This next page is where you pick your domain
name and the title of your blog. You will need
to think carefully and maybe try a number of
options in this next step. Type in the domain
name you want for your blog. This isn't neces-
sarily going to be the name of your blog, but
it should be as close to it as you can get. If
your name is already in use by another blogger,
you'll be prompted to try another domain
name. The default name here is the same as
your Username. Try to keep this name short
and sweet so that your readers can type it as
easily as possible. In this instance, I chose
to keep it the same as the Username, so the
resulting URL for the blog is http : / /www .
hoi lywoodbar tender . wordpress . com.
Remember: Like the site says, after you choose
this Web address, it can't be changed. You can,
however, start all over later if you come up
with a genius idea for a domain name.
Blog Domain
'woodbartender .wordpress .com
Prtw adWrw* will lw (iriiKinin.wri-iiprrssjofji ti irust t)B al i&ser a characters, letters and
numbers nnlr. Hcannntbe changed so chonsn rarefijlh"i>
You have to remember your password, so don't get too exotic with your made-up combinations just to please
the strength bar. (The Password strength bar beneath the password entry box shows how your password sug-
gestion ranks in terms of un-guess-ability.) A password that rates as Good is probably enough for anything other
than a banking/financial information site or a Department of Defense nuclear secrets site.
226 Part III: Going Web 2.0
5.
In the next box down, give your blog a name in
the Blog Title field. Most people try to come up
with something memorable. Unlike the URL, you
change alid tweak the blog title later. In this
Pi Cyfcyo^tU ild on the words Hollywood
terraer^iat ajtpear in the URL, so the blog
title is "The Secret Life of a Hollywood
Bartender."
Blog TItl*
[The Secret Life of a Hollywc
The bag bile can be changed at any lime.
en - English
en - English
eo - Esperanto
es - Espanol
et - Eesti
eu - Euskara
fa -
fi - Suorni
fil - Filipino
fo - Fsroyskt
fr - Frangais
fur - Furlan
fy - Frysk
ga - Gaeilge
gl - Galego
gn - Avanee
gu - ORfSldl
he - nniii
hi - r?^rr
hr - Hrvatski
hu - Magyar
hy - Armenian
ia - Interlingua
ir\ d ■-■ ■-■ ■-■ ■-■ 1 I--. .-J .-. I--. .-. .-■ I ■-.
6. Choose the language you will be
blogging in. This list will set the
default character set available for
your text. That is, if you're going
to blog in Hindu or Farsi, choose
that language so the characters
show up how they're supposed to
(rather than appearing as blank
spaces and random punctuation).
7- Leave the Privacy check box selected if you
want your blog to show up in search engines.
(Um, clear the check box if you don't want to
be listed in search engines or WordPress.)
However, clearing this check box doesn't
mean that your blog will be totally invisible
and private — just that you're not going out
of your way to publicize it and try to drive
traffic to it. Click the Signup button when
you're satisfied with your choices.
Remember: After you click this button, you
cannot change the URL: You can only start
over and pick a new URL.
ffi WordPress.com
Home Sign up Fe
Slog Domain
Blog Title
Language
Privacy
Mil llll
woodbartender . wor dpress .com
<Youi address win rm otmvMi.viiwtfjprBss.aja it trust be al least 4 characters, leters and
numbers only It MMNNM changed so choose cafnljllyi)
[The Secret Life of a Hollywc
Tng b log ids canbn changad at anylmo
IWial I an guagi mil you bg prtmanh/ blogging in?
en • Engieh
I' I would like my bloo to appear in search engines like Gwogle and TechnoraH and in
public listings aioundWorclPiess.com.
Chapter 11: Designing a Blog
8.
WordPress sends a message to the e-mail
account you entered. Go to your e-mail inbox
and check for the message. You must click
thejink if themessage (or cut and paste it
r navigation bar) to activate
y take up to 30 minutes for
the confirmation message to arrive, so be
patient if it doesn't show up immediately.
However, you must confirm this activation
e-mail within two days, or WordPress will
assume that you entered an incorrect e-mail
address and then delete your blog.
Howdy,
Thank you for signing up with WordPress.com. You are one step away from blogging at
hollywoodbartender.wordpress.com. Please click this link to activate your blog:
htt p : //wo rd p re s s . c o m/a ct ivat e/d6580 1 a e792 1 49 a c
--The WordPress.com Team
(If clicking the link in this message does not work, copy and paste it
into the address bar of your browser.)
Your account is now active!
Username: Password:
hollywoodbartender *********
Your account is now active. View your site or Login
9* If you haven't received your confirmation
e-mail yet, scroll down to see some other
options. You can click Contact Support, or
re-enter your e-mail address. When you do
click the link that you receive in your e-mail,
you are taken to a page that says Your
Account is Now Active! Your username and
password should already appear in the
blanks on that page.
10. You are prompted to update your profile.
You can do this now, or get back to it later.
If you want to do it now, enter your first and
last name, and write a short description
about yourself and why you are blogging.
Click the Save Profile button after you're
done. Don't worry — you can go back and
change it if you later don't like it. You will be
taken to the Login screen.
Update Your Profile!
If you haven't got your activation email why not update your profile while you wait?
First Name:
Last Name:
About Yourself:
Hollywood
Bartender
I serve frothy cocktails to the
rich, famous and barely
clothed. It's a glamorous job -
and an absurd one. I
Save Profile
If you have not received your e-mail verification message, be sure to check your spam filters.
228 Part III: Going Web 2.0
DropBQQb^
ds in the Login screen aren't filled
in, enter your username and password; then
click the Log In button. You can select the
Remember Me check box if you're on your
own computer and want to have it fill in the
blanks for you.
WordPress.com
Username
hoi lywood bartender
Password
Remember Me
Get a free WordFress account | Lost your
password?
rc»i WwiFie^.vOfiaojl
The Secret Life of a Hollywood Bartender * 1
f> DasMioanJ
bail* •.ml
E&3 Stat:
Pteg Vrfsr
H » Comn Mi
P eadomattit
Tag SurtV
: in- ■ •
Nr Blags
'•'*< Upgrades
j? Pests
Uj Media
^ Links
O Pages
■-.J Cctmncoti
W Ratines
A PoUe
Dashboard
WordPrers ornouncemont: SoLndCloud
Rmtit now
JltcSfc/icv
1 Post
1 Page
1 Category
O Tags
"rti»w« r«b«i<ir Mi«h o widgets
1 Comment
1 Approved
O Pending
O Spam
CKjnga Tti«me
x . vl t i ipam d .j in yef.ro to your blag, bot (To c ;
notriing m jour spam quaua at (ha mcmant.
Ree»nt Comments
From Mi WoMPress on rMo vorldl #
yXX^a Hi, this is a comment.Ta delete a comment, just
v£tX* log in, and viaw the posts' tarnmants, thara >ou
will hava ,. .
;u i I : ri r.
Title
Upload/Insert | B _L .-. «
Contort
Taos
Save Craft Reset
Recent Drafts
Thara ana no crafts at tha mamgnt
Stats
"Wow par day
3
12. When you login, you will be taken
to the Dashboard. This is where
you have an overview of all the
controls you can use on your
blog. Start by customizing your
template, which is the focus of
the next task.
Chapter 11: Designing a B,„, 229
Btoqginq software options
ively about WordPress in this
ir,V3W it is by no means the only
blogging solution out there. If a blog is an
important part of your Web plans, spend
time researching the available solutions to
find the one that fits both your plans and
your pocketbook.
Here are two other hosted solutions you
can take a look at:
TypePad, at www. typepad. com, has three
pricing levels, depending on the level of
functionality you want. TypePad is proving
to be the platform of choice for busy pro-
fessionals who want the convenience of
a hosted service with more support and a
larger feature set.
Blogger is Google's blogging software.
If you already have a Gmail account, you
can use Blogger. Like WordPress, it's free.
Although it's quite easy to use, it doesn't
have as many plug-ins and features as
WordPress offers. Sign up for Blogger at
www . blogger . com.
If you want to install software on your own
Web server, here's a description of the
major players:
Movable Type is the granddaddy of blog-
ging software, the gold standard to which
all others are compared. It has tons of help-
ful features, and if you develop the proper
skills, you can make this software jump
through hoops for you. Check it out at www.
movable type . com.
Joomla! is an extremely powerful and
extensible content management system
(CMS). This program offers far more than
just blogging tools and is great for online
magazines and other complex sites.
Joomla! is also increasingly used by many
power bloggers. They point out that you
can't beat the features it offers for the price:
it's free. This software is open source, so
many plug-ins, extensions, and themes are
available. If you plan to build a blog that
can hold up under heavy traffic, or that can
be customized to do things beyond what
a normal blog can handle, this excellent
choice is available at www. j oomla . org.
ExpressionEngine, at www. expression
engine.com, has its roots in blogging soft-
ware but is evolving into a fully featured
CMS with excellent blogging tools. Throw
in extras like photo galleries, shopping cart
modules, forums, polls, and great customer
support, and you can use this product to
run your blog and some of the biggest and
most complex Web sites on the Internet.
I mention only these blogging options
here, but you can check out dozens, includ-
ing many on social networking sites like
MySpace or Facebook. Carefully consider
your needs, as well as what you might like
to do in the future as you make your deci-
sion to find just the right set of features for
your situation.
230 Part III: Going Web 2.0
Customizing l/our Blog Template
st u ft you
Need to Knou)
Toolbox:
^ An updated Web
browser, such as
Internet Explorer 8.0 or
Firefox 3.5
\* A blog on
WordPress.com
Time needed:
Half an hour to
an hour
One of the greatest strengths of WordPress is the stunning number and
variety of templates available. A template sets the look and feel of your
blog: the size and position of the banner, the typefaces and font sizes,
how many columns appear, what the comment system looks like, and
much more. The templates help you show off photos, videos, music,
and almost anything else you can upload to the Internet. You can create
your own template with Web design tools, but to start, it might be best
to play around with the free themes to get a feel for what the various
design and blogging choices mean.
For example, a blog with only one big column works great for photogra-
phers wanting to show off their shots in the biggest possible format for
maximum visual impact. A blog with multiple narrow columns works for
an organization trying to present multiple threads of complex informa-
tion: say, a school that offers parents a way to see a calendar of events,
the school lunch menu, and a recap of the last PTA meeting.
You can spend hours browsing through all the possibilities available
for free on WordPress.com. Also hundreds of designers are willing and
eager to sell you customized templates that use Flash, Silverlight, and
other multimedia technologies to make your blog stand out from the
crowd.
/• Log in to your WordPress
account. On the Dashboard
page, scroll down until you see
the Appearance drop-down
list. Click the Appearance
button to open up that menu.
H Appearance
% Users
Ti Tools
\M\ Settings
O Appearance
Themes
Widgets
Extras
to
Custom Header
Edit CSS
35> Users
Trj Tools
[Ml Settings
2. Under Appearance, click Themes to navigate
to the directory of free themes available
through WordPress. You can scroll through
multiple pages to find one that suits you.
Click the thumbnails to open a window
showing a mock-up of what your blog would
look like. When you find a design you like,
click Install to make that your template.
Note: You can always change your template
later.
Chapter 11: Designing a Blog 23 /
The Swret Life of a HoUywooJ Bartend er
Hindi hnllfwaodbsrtender 'Turbo I Log Gut
DdihbD&rd
dag Ststi
HZl McrnageTfiem.es
Current ThEme
,- 1 1
Hf Slogs
sty Look by Ssdteti
column white thame nth top-leval page navigation and large custom header.
tom Widgets | E^g^ | Custom header | Edit CSS
Tags . custom-header, two-cdurrinE, fii«d-*frJth, rtHanrjuerje-suupDit. ^rute. tight, right-sidebar-,
widgets, tricky -a dec
& Pacts
Edrl
Pnd-T-in*
4j
Browse Tti ernes
nafidam | A-Z | Papular
Daptmpra 13 rcnobrri tfxnmt otii o/t6 Refresh |
3- I'm using a theme called
MistyLook as an example here
because it offers a couple of easy-
to-control features and allows me
to show off interesting widgets.
After the theme is installed, it
appears on top of your Manage
Themes page.
4- Start the customization by working in the
Header Image first. Click the Custom Header
link. I prepared an image to replace the pic-
ture of the trees and bridge over the pond.
You can use any photo-editing program to
make a similar Header Image, as long as it
fits in with the size requirements. In this
case, you can crop an image to fit; or if you
have one that's 760 x 190 pixels, you can use
it as is. Click the Browse button to navigate
to where your image is stored. When you
find it, click to select it and then click Open.
Then click the Upload button.
This is ynur header image. Ynu can change the text color or upload and crop a new image.
Your Header Image
Upload New Header Image
Here you can upload a custom header image to be shown at the top or your blag instead of the default one . On the next
n you will be able to crap die image ,
images oF Exactly 760 x 190 piiels wll be used as-is.
Choose an image from your computer:
Eemiel..
Upbad
You should settle on the general look and feel of your blog within the first week or so. Making too radical of a
change after you create many blog posts can be problematic because of differing photo widths, font colors, and
other elements that work great under one blog theme but can "break the page" when applied to another
theme. For example, say your photo blog shows off some of your breathtaking landscape shots 800 pixels wide
on a white background. Then you decide to switch to a 4-column blog where each column is only 200 pixels
wide to show off more photos at a time, against a black background. Unless you re-size all the photos you've
uploaded, your photos will either overlap and cover up your other content, or worse yet, the conflicting stan-
dards will cause your blog to refuse to load and visitors will see only an error message. And if you've specified
that some of your text appear in black, it will be invisible against the black background unless once again - you
guessed it - you go back into every blog post you've ever done and laboriously track down and adjust the
custom text color.
232 Part III: Going Web 2.0
The Secret Life of a Hollywood Bartender visit site
Header complete!
Visit Site
jsl^purCJtiParid you should see the new header now,
5. You see a message that reads Header
complete ! Click the Visit Site button to see
what your new blog header looks like.
6. Check out your new blog header. You can go
back and edit the source picture if you're not
happy with the way it looks (using a photo-
editing program like Photoshop). Click My
Dashboard (top of the window) to go back to
the control panel to customize a couple
other things about your blog's appearance.
The Secret Life of a Hollywood
Bartender
.»1j>:v
fMdi- □Pom Olommarti
Hell- world'
Aun«t . 1, ZyjQV b< hol>««crtcfcjrtaMtr rdft
vsttame to wortDrati.mm. Tins it foj fist post. Edt or dslea t andfurt
ARCHIVES
»i»jurt JOW 111
CATEGORIES
PAGE3
Abo.*
W| Settings
General
Writfl
Reading
Discussion
Media
Privacy
Delete Blog
OpenID
Domains
7. Under the Settings panel, click General.
These settings control the title of your blog,
the tagline, time zone, e-mail address, and
other basic data.
Chapter 11: Designing a Blog 233
8.
Because I customized the image to
include the title of the blog, I'd like
to get rid of the redundant words
t appear |bove the banner. I
pj Menefc^oQ^leted the words
at w^relriThe mog Title and
Tagline text boxes. You can also
use this page to change the title and
tagline, if you want. Click in the text
boxes to make your changes; then
click Save Changes at the bottom of
the page to make the changes take
effect on your blog. Click Visit Site
(up at the top of the page, next to
the title of your blog) to see what
the changes you have made look
like. Your tagline can be a longer
explanation of what your blog is
about, a favorite quotation, a joke
or you can go without one.
General Settings
Blog Title
Tagline
Language
E-mail address
The Secret Life of a Hollywood Bartender
5
Just another WordPress.com weblog
In a few words, explain what this blog is about,
en - English ▼
Language this blog is primarily written in.
You can also modify the interface language in your
profile.
bartenderhollywood@yahoo. com
This address is used only for admin purposes. If you
change this we will send you an email at your new
address to confirm it. The new address will not
become active until confirmed.
Blog Picture / Icon
Upload a picture (jpeg or png) to be used
as your blog image across WordPress.com.
We will let you crop it after you upload.
Browse...
Upload Image »
9* As you can see in the figure, I removed the
distracting words above my nice new
banner. Now it's time to customize what
appears in your sidebar(s). (You likely
noticed by now those boxes running down
the side columns, depending on your layout
and the features that come with your
template.)
H>. iih AkDdl
Frnds: j jPDift I JCairmunti
Hello wwrld!
Augun r>. jQOO L f holyuGadturtendar i Edc
welcome jo '■ygrdPrass &Btfi> Thr? e four first post Edit r> delete t and stdit
hlogainal
ARCHIVES
4upust ZDD5 (1)
Categories
UnHtegpriirri (1)
in) Appearance
Themes
Widgets
Extras^
Custom Header
Edit CSS
10. Click on the Dashboard button in the top
left corner of the page to return to your
Dashboard page, and scroll down to the
Appearance panel. Click to open the
Appearance panel if it's not already
open and then click Widgets.
Widgets are little pieces of code that make things happen on your blog, such as making your calendar appear,
showing how many spam comments have been blocked, displaying photos that you have posted on other places
around the Web, like Flickr.com, or letting your readers see your most recent Twitter updates.
Part III: Goinq Web 2.0
DropBooks
1 /. You navigate to the Widgets control panel.
Click a widget that you like and drag it to one
of your sidebars. Hint: If you have multiple
columns in your blog layout, you will have
multiple sidebars to choose from.
Sidebar 1
Akismet <i^t>
Title:
Remove | Close
Flickr
Title:
Flickr Photos
Flickr RSS URL:*
How many photos would you like to
display?
3 T
* Your RSS feed can be found on
your Flickr homepage. Scroll down
to the bottom of the page until you
see the Feed link and copy that into
the box above.
Leave the Flickr RSS URL blank to
display interesting Flickr photos.
Remove I Close
En Widgets
Available Widgets
Drag widgets from here to a sidebar on the right to activate them.
Drag widgets back here to deactivate them and delete their settings.
Akismet
Akismet
Archives
A monthly archive of your blog's posts
Authors
Authors
Blog Stats
Blog Stats
Box.net file sharing
Box.net file sharing
Calendar
A calendar of your blog's posts
12. A four-pointed icon appears over the title bar
to the widgets that you're dragging. This means
that you can drag the widget to your sidebar,
or drag it out of your sidebar, if you don't like
how it looks or acts. You can also reorder the
widgets by dragging them up or down in the
sidebar. Some widgets will have boxes for you
to fill in with information, such as the title
you'd like to appear above your most recent
posts, or the URL to a Flickr account. When
you're done making entries and you want to
see how the new sidebar looks, click Visit Site
at the top of the page.
Chapter 11: Designing a Blog
LAST ROUND
Hello world!
pBpoks
f [ Search
SPAM BLOCKED
spam comments
FLICKR PHOTOS
13' You see the new
widgets as they
appear in the side-
bar on your page.
If you don't like
how they look,
navigate back to
the widget page
and either adjust
them or drag them
out of your
sidebar.
W0\ Manage Themes
Help
Current Theme
Misty Look by Sadish
A two column white theme with top-level page navigation and large custom header.
options: Widgets | Extras | Custom Header | Edit C^SS
Tags: custom-header, two-columns, fixed-width, rtl-language-support, white, light, right-sidebar,
widgets, sticky-post
74- In the Appearance box, click on Themes to navigate to the Manage Themes page. The
last, and most complicated option for customizing your theme, is Edit CSS. This is
most definitely not for beginners. You will need to purchase a Custom CSS upgrade,
which will cost you about $15 per year per blog that you want to totally customize.
With this option, though, you can control the fonts, colors, sizes, arrangements,
line thickness — basically everything in your layout. You can make one change
here without having to pay: setting the maximum width for media files in your blog
so that pictures or videos don't overflow your columns and mess up the look of your
blog. If you are going to embed videos on your page, your columns should be at
least 360 pixels wide. Most basic videos are 320 pixels wide. If you want to display
higher-quality videos, they are 640 pixels wide, so your layout should be at least 680
pixels wide, to allow some breathing room. The total width of your blog is up to
you; but most Web designers try to keep their pages under 970 pixels wide so they
display well on monitors set to a 1024x768 resolution.
236 Part III: Going Web 2.0
Posting to l/our Blog
Stuff )/0U
Meed to Knout
Toolbox:
w An updated Web
browser, such as
Internet Explorer 8.0 or
Firefox 3.5
A blog on WordPress.
com
Time needed:
Less than half
an hour (unless
you're a slow
writer!)
Posts
Edit
Add New □
Post Tag?-'
Categories
2.
Updates to your blog are called posts, or entries. Blog posts are gener-
ally short (although they don't have to be) and can be composed
directly in the blogging software or written in more traditional word
processing software and then pasted into the composition window. (For
advice on creating a readable, interesting blog post, read the following
sidebar, "Writing for your blog.")
Nearly all blogging software works similarly to word processing soft-
ware, or even e-mail software. After typing an entry, you can use handy
formatting icons in the publishing interface to create text styles. Blog
software also has icons you can click to accomplish simple HTML tasks,
such as inserting links, photos, or videos.
Creating a new post is easy to do. In fact, if you can write an e-mail mes-
sage, you can write a blog post! Follow these steps:
Log in to your blog at www. wordpress . com.
Scroll down to the Posts button and click it
to open its drop-down list.
Click Add New to open the
Add New Post page.
Posts
Media
^ Links
Pa
ges
Q
Comments
O
Ratings
© Polls
3- The Add New Post Page looks
complicated, but after you work
with it a few times, the basic func-
tions are pretty intuitive. First,
write a snappy headline for your
post. Click in the text field at the
top of the page and type in a short
description of what you want to
say. Then press Enter (Windows)/
Return (Mac).
Add New Post
Upload/Insert H H A # ®
Visual HTML
B I am IE IE « - -
Path:
Word count: 0
Excerpt
Screen Options Help
Publish
Save Draft
Preview
Status: Draft Edit
Visibility: Public Edit
O Publish immediately Edit
Publish
Add
Post Tags
Add new tag
Separate tags with commas.
Choose from the most used tags in Post
Tags
Categories
Chapter 11: Designing a Blog 23 7
4- A URL and a couple of buttons appear below the
headline text box. The URL, or Permalink, is the
address where your post will appear when you
llvpubli|h it. You will see the Web address
ui |loj*l»lwi^ed by the date and the
rcftjs) rrfyour ntfadline. You can click Edit to
change the words in the Permalink if you want
to make them different from your headline. Or,
if you're planning on sharing your post via
e-mail, or social network sites like Facebook and
Twitter, click Get Shortlink, and WordPress will
automatically compress the post's URL to a
combination of letters and numbers.
Top 10 Mistakes When Ordering a Drink
Permalink: http://hoHywoodbartender.wordpress.com/2009/08/22/top-10-
mistake...dering-a-drink/ Edit Get Shortlink
B
I
< —
i i
i ii
\9_
0[a_
Paragraph
▼
u
A
n
If you don't want a bartender to ignore you for the rest of the night -
If you don't want your friends to mock you mercilessly -
If you want to impress the hottie you've somehow managed to engage in
conversation -
Then you need to avoid the following 10 deadly Hollywood Bar sins:
Path: p
Word
count: 85
Draft Saved at 6:20:04 am. Last edited by holly woodbartender on
August 22, 2009 at 11:14 pm
6. The five buttons at the top of the Upload/Insert
area allow you to insert some very special con-
tent. From left to right, they allow you to add
an image, insert video, add audio/music, add
media (kind of a catch-all), or add a poll.
Clicking each button opens a window that
prompts you to choose files on your local hard
drive, or that are at a URL on the Internet.
WordPress does enforce some space limitations
(3GB of content comes free, but you can
upgrade to up to 25GB of storage) although it
does offer upgrades where you can buy addi-
tional storage and bandwidth.
In the Upload/Insert area, type the text of your
blog post, using the formatting icons to choose
fonts, create lists and links, and customize other
layout styles. Hint: To apply formatting to the
text, select the text you want to affect, and then
click the icon for the style you want to apply. You
can choose font options, bold, italics, text color,
text alignment, bulleted or numbered lists, special
characters, and more. If you don't see all these
options, click the Show/Hide Kitchen Sink button
on the far right or press Alt+Shift+Z (Windows)/
(Mac) to open what WordPress calls "The Kitchen
Sink." This is the second row of buttons that
includes such functions as pasting from Microsoft
Word (a handy feature that allows you to avoid
contaminating your blog post with Word's format-
ting), or designating something with the various
Heading, Paragraph or Address tags.
Upload/Insert H H Ji # ^
h
B
7
■ —
■ —
■ —
i —
i —
i —
u
Add Poll
■ii i
All kinds of considerations make writing a good headline for your post one of the most important things you do
on a blog. Search engines pay special attention to the words in headlines, and a well-written description can
help drive traffic to your blog. (Do a little research on search engine optimization as a primer.) Readers are also
attracted to funny, shocking, or strange headlines — and Top 1 0 lists.
238 Part III: Going Web 2.0
7.
DropBo
To insert an image into your blog
entry, click the Add Image icon (looks
like a rectangle inside another rectan-
To find out how to prepare
lsI3 use on the Web, read
*ff ) The Add an Image window
appears, where you can choose from a
handful of methods: Choose an image
on your computer and upload it, pro-
vide the Web address (URL) for an
image on another Web site, or add an
image from your Media Library. Just
click the tab you want at the top and
follow the directions that appear on
screen.
From Computer From URL Media Library
Add media files from your computer
Allowed file types: jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx.
Choose files to upload
Select Files
:ancel Upload
You are using the Flash uploader. Problems? Try the Browser uploader instead.
211.1 kB used, 3.0 GB (100.0"M») upload space remaining. You can upload mp3, m4a, wav, ogg
audio files and increase your available space with a Space Upgrade . You can upload videos and
embed them directly on your blog with a Video Upgrade .
It / A8€
• — 1 — 44
— — "
Paragraph
n m a
JL Insert/edit link (Alt+ Shift* A) '!
If you don't want a bartender to ignore you for the rest of the night -
If you don't want your friends to 3 §B-
8. To add a link, first select the text that you
want readers to click to find the link. Then
simply click the Link icon (the link of chain)
or press Alt+Shift+A. When the URL window
opens, copy and paste the Web address for
the link into the window. Note: You need to
use the full URL, including the http : / / part,
to create a working link.
9. You can also add tags to your blog post. Tags are
keywords that describe the blog post, and search
engines pay special attention to tags so that they
can better sort your content into search result
listings. To add a tag, simply type it in the Add
New Tag text box, just to the right of where you
entered your post. Click the link below this box to
choose from a list of tags that you frequently use
so that you don't have to spend time typing in the
same old words over and over again. Click each
tag, and it will appear under the Add New Tag
box. Click on the gray "X" next to the tag if you
made a mistake, and want to delete it.
Add
Post Tags
deadly sins, hollywood, bar
Separate tags with commas.
Choose from the most used tags in Post
Tags
The Media Library option is particularly handy if you want to add a company logo or other image to every post;
you don't have to keep uploading the same thing because WordPress allows you to navigate through your
uploads and pick the one you want.
Chapter,,: Designing a B,„, 239
70. Click the Check Spelling icon (looks like a check mark on top
of the letters ABC) to have spelling errors underlined in red in
your blog post. Click any error to select from a list of correc-
tions. You can choose the language you want the spellcheck
1j)lroS2n by clicking on the triangle next to the ABC check-
irlrPWiton to open up the drop-down menu. You can then
click on the language that you want spellcheck to operate in
when checking the spelling in your post. Spellcheck will then
underline words that are misspelled in that language. If you
compose a post that uses words from a couple of languages
and you're not sure about the spelling, this feature can come
in handy because you can spellcheck in one language and
then do it again in another language.
Languages
7 7. Before you post your entry, click the Preview button, in
the upper-right corner of the Add New Post page, to see
how your chosen styles look. This opens another
browser window with your post in it as it will look when
it is published. You can return to Editing mode by clos-
ing this window. If you decide (after previewing) to
remove formatting, simply highlight any element with a
style you want to remove and click the Remove
Formatting icon. (It looks like an eraser.)
Publish
Save Draft
Preview
Status: Draft Edit
Visibility: Public Edit
[TTl Publish immediately Edit
Delete
Publish
Publish
Save Draft
Preview
Status: Draft
I Draft
OK
Cancel
Visibility: Public
F Public
|~~ Stick this post to the front page
P Password protected
C Private
OK
Cancel
Publish immediately
24
2009
@
□6
■
■
12
OK
Cancel
12. Click the Edit link next to Publish
Immediately to see options for setting the
date and time of your post. Click Edit next to
Visibility: Public to control how the post is
seen. You can choose to make this post
always appear on the front page of your blog,
password-protect it so that only people you
authorize see it, or make it private so that
only you can see the contents. Click Edit
next to Status: Draft to make this blog entry
either a draft; or mark it as Pending Review if
you are collaborating with others and are
waiting for them to look it over. You can
leave all the options expanded, as shown in
the figure, but you need to click OK in each
area for the settings to take effect.
Delete
Publish
2tf0 Part III: Going Web 2.0
DropBeeks
r Deadly Sins
r Top 10
Categories
All Categories Most Used
H- Add New Category
New category name
Parent category
Add
73- Click Add New Category in the Categories section.
A text box opens where you can type in new catego-
ries, or select check boxes next to existing catego-
ries. This is a simple but powerful tool that allows
your users to sort your blog posts based on catego-
ries that they are interested in, without them
having to search through all your pages in chrono-
logical order to find the topics they are interested
in. For example, a user who wants to see all the
posts you've written that are Top 10 lists would
click Top 10 under the Categories section of your
blog to make your blog generate a page containing
only posts that you have categorized as being Top
10 lists - or related to Top 10 lists.
74- The Excerpt area allows you to
choose what sentences or para-
graphs will appear in the RSS feed
of your subscribers, or that will
be weighted more heavily by
search engines. You can either
pick your best and most descrip-
tive writing, or you can sum up
what you have to say.
Excerpt
Never order a frothy pink drink with fruit punch in it, umbrellas
sticking out and a little plastic monkey on the side, unless you're
planning to give it to someone else. Show some dignity, man!
*
Excerpts are o
in your theme
ptional hand -crafted summaries of your content that can be used
Learn more about manual excerpts.
£ Edit Post
Post updated. View post
Bartender psyche
75. When everything looks right, click the Publish
button. The system then confirms that your post
has been published. After you publish your post,
click the Visit Site link at the top of the page, or
View Post, to ensure that your post was pub-
lished successfully and looks the way you want.
You can assign multiple categories to your posts. If you are writing about a piano-playing cat, for example, you
can assign the post into the categories "cat," "piano," and "funny." Then, when users come to your blog and
want to see only posts that are cat-related, they can click on the "cat" category to zero in on only content that
falls in that category. Another user wanting to read about pianos might click on the piano category, and your
same post would appear in that list - along with posts about pianos that don't include cats.
Chapter 11: Designing a Blog /
Drop
If you've read other chapters in this book, chances are you learned quite a bit of HTML. If you feel comfortable
using HTML, you can actually use it right in the blog post window of WordPress. (As with regular text, you can
write HTML directly in the window, or create your code in another application and copy and paste it into the
f\ /^Jopsgjundow.) If you want to use code, click the HTML tab of the composition window to switch from
After your blog is up and running, you can make updates by using e-mail. Updating in this way requires you to
set up a special e-mail address that you are urged to keep secret. From the WordPress Dashboard, click the
MyBlogs link and then click the Enable button under the Post-by-Email column. A special e-mail address will pop
up in that column. Click the drop-down menu, choose Enable Post by Email, and then click Apply. Copy the
e-mail address and save it in a secure location (such as a document on your computer's hard drive). When setup
is complete, simply cut and paste the e-mail address you just set up, choose a title by typing it in the Subject
field, and then create a blog post in the body of your message. When you click Send, the message wings its way
to WordPress and onto your blog.
Writing for your btoq
Blog style is generally conversational and
informal in tone and style. You should
address the reader directly to play up this
aspect of blogging, almost as though you're
talking to a good friend on the phone or
writing an e-mail message.
I don't mean that you have to throw out the
rules of grammar and spelling although
many bloggers do so. You'll find that many
readers appreciate carefully crafted sen-
tences when they read blogs as much as
they do when they read books. Why make
yourself hard to understand?
Many writing coaches say that being rig-
orous about spelling and grammar is a
good way to sharpen your thinking. And, of
course, it's true — the more attention you
pay to writing well, the better your results,
even if you're just blogging about the ter-
rific play you saw last night, or the way your
friends always seem to call just when you
get in the shower.
Don't forget that blogging doesn't have to
mean all writing, all the time. Many ter-
rific blogs are devoted to displaying a pho-
tograph every day, or to video blogging.
Numerous others combine text, photos,
audio, and video, which keeps them fun
and interesting for readers — and for the
blogger.
Part III: Goinq Web 2.0
Promoting your btoq
r gC£rs subscribe to the idea that/' If
ey will come." Let me be the
first (or not) to burst that bubble: Blogs need
to be promoted as much as any other Web
site if you're trying to appeal to an audience
that doesn't already know and love you. (Is
it considered promotion when you e-mail
everyone in your family to tell them about
your blog?)
The good news is that at a very technical
level, the setup of blogs helps them show
up well in search engine results. And, of
course, search engines love sites with fresh
content, so a frequently updated blog truly
has an edge over one that sees new content
once in a blue moon.
Here's a quick batch of things you should
do to make the most of your new blog:
Ensure that your blog has an RSS or Atom
feed. A feed is essentially a syndication
mechanism for your blog: a coded presen-
tation of your updates that can be picked
up and read by newsreaders, feed aggrega-
tors, and blog search engines, which in turn
pass whatever they receive from the feed
to humans visiting other Web sites. The
result: eyeballs on your content and links to
your blog. Most blog software can gener-
ate automatic feeds, but you should ensure
that the feature is turned on and function-
ing. (WordPress automatically generates an
RSS feed.)
Turn on trackbacks and pings. Trackbacks
are a little hard to describe, but I'll try:
Essentially, a trackback is a way for blog
software to communicate in the background
and build links to other blogs. It goes like
this: Blogger A posts interesting material on
his blog. Blogger B reads that post, and has
more to say about the same topic on her
blog. Using the trackback URL on Blogger
A's post, Blogger B's blog software noti-
fies Blogger A's software about the new
post. Blogger A's software then automati-
cally builds, in the original post, a link to the
new post. At the end of this (alphabet soup)
process, Blogger A's readers see the link to
Blogger B's post and visit her site to read it.
Pings work similarly but are basically a
"heads-up" notification service sent to
some of the bigger blog search engines
and indexers. When you let these Web sites
know that your blog has been updated,
your listings are included in the results that
are displayed the next time someone per-
forms a search, and again, more readers are
directed to your site.
Many blog software packages offer both
trackbacks and pings, and by simply turn-
ing on these settings, you receive the ben-
efit with little to no work each time you post
to your blog.
Remember that your blog posts are an
important part of promoting yourself.
Keep the material you write interesting and
topical. For example, if you choose to blog
about a subject that's in the news head-
lines, you can attract readers who might
never have visited your blog otherwise.
Keep track of what's going on in the world,
and think about how you can relate your
topic to the broader context of discussion in
the blogosphere.
Use social media to alert friends and col-
leagues. One of the best ways to keep
people coming back to your blog is to
remind people who already know you on
Facebook, MySpace, Twitter, hi5, Beebo and
other sites, that you have produced some-
thing new and interesting. This is where the
shortened URLs often come in handy. You
can also integrate material that you or your
friends post on these sites into your blog,
via the handy RSS feeds that every social
networking site maintains.
Chapter 12
DropBootodcasting Your Own Show
If you haven't been hiding in a cave on Mars, you've prob-
ably already heard the term podcasting. It's one of the hotter
Internet buzzwords of recent years, and many people have scram-
bled like mad to incorporate podcasts onto Web sites.
The techie explanation is that a podcast is any audio file stored on
the Internet that can be downloaded and played later on either a
computer or a portable device. In real terms, a podcast is a radio
show that you can take anywhere on a portable device, such as
an iPod, or play on any computer that's connected to the Internet.
Podcasts are better than radio programs because you can start, stop, and rewind
whenever you want. You can play them any time, anywhere. Podcasts enable you
to connect with your site visitors or community through music or talk or both,
enriching the experience or content your site has to offer. You find examples of
how sites put podcasting to use in the nearby sidebar "Who's podcasting?"
A good podcast can consist of a live interview that's available to listeners for as
long as a Web site hosts it, a lecture by a Nobel prize-winning professor that stu-
dents can use to help them study, or the wail of a newborn infant taking her first
breaths. A podcast can be a long-winded blogger's rant that will be heard only by
a close circle of fans, or a stirring national address that will be cherished by an
entire nation.
Podcasting is limited only by your imagination. As with so many other topics, a
library of books could be filled with the bottomless depths of technical specifica-
tions that can be involved in recording, editing, and posting a podcast. Fortunately,
you don't need to know all that to get started. In this chapter, you find the most
basic, cost-effective way to produce a professional-quality podcast, using free and
easily available tools and programs.
4£/
Tasks Performed
in This Chapter
v Preparing a podcast
Recording a podcast
Editing an audio file
Publishing a podcast
21)1) Part Goin 9 Web 2.0
Drop 3ooks;
Who's podcastinq)
fly describes some of the
eople who are podcasting
nowadays:
Musicians who want to connect with fans
and promote their bands: Some forward-
thinking bands use podcasts to share
excerpts from live shows, hype concert
tours, and reward fan club members with
exclusive content.
Families who want to remain connected
across distances: Recordings of a baby's
first words, grandpa's story time, or a rau-
cous family reunion aren't proper substi-
tutes for being there, but they can at least
allow people to get a flavor for what they
missed.
Amateur DJs and novice broadcasters who
want to show off their skills: A tight, well-
produced podcast can be an invaluable call-
ing card to a beginner hoping to take the
next step up the career ladder.
Companies that provide training and man-
agement updates, especially to employ-
ees in far-flung offices: One of the fastest-
growing usages of multimedia is corporate
communications. CEOs use podcasts to
reach out to customers and reassure them
in tumultuous times, and HR managers
find spoken-word explanations of the latest
change in corporate strategy that show up
in employees' e-mail inboxes helps main-
tain consistent corporate culture, and adds
the kind of "human touch" that relaxes and
reassures employees.
Churches that make their weekly sermons
available: Congregation members who are
ill or traveling or who otherwise can't physi-
cally attend church can still hear the weekly
services.
Bloggers who want to augment their
content: Audio clips from interviews are
increasingly popular, as are stream-of-con-
sciousness rants that provoke controversy
and build up page traffic.
Radio producers and other professionals:
Many excellent radio programs that are
now available online as podcasts ensure
that you never miss your favorite show.
Listening to professional podcasts is one of
the best ways to get new ideas for how best
to create your own.
Preparing a Podcast
Be sure to take the time before you record your podcast to plan what you want to
say and how you want to say it. Even trained on-air personalities rarely try to make
live, improvisational recordings. After a few minutes, an interviewer who doesn't
have at least an outline or some good questions for a guest runs out of things to
say, and the session can turn into a nightmare of "urn" and "uh."
You don't have to strictly follow a script, however, and stick to every little comma
and pause. One thing that makes listeners respond and come back for more is the
feeling that you're talking to them rather than at them (like a late-night infomercial).
And, one of the most difficult challenges I can imagine is to make yourself sound
natural and relaxed while giving a monologue.
Chapter 12: Podcasting Your Own Show
A good place to start as you plan a podcast is to think about creating a distinct begin-
ning, middle, and end. A good show usually starts with some kind of introduction of
the host and any guests, moves on to the main topic, and then concludes with a tease
to the next show you plan to produce. This outline for a music podcast gives you
s for what you might include — make your outline as detailed as you like:
Play an introductory music clip.
2. Greet the audience, introduce yourself, and state the number or date of the
podcast.
3. Briefly explain the theme or topic of the podcast.
4. Mention any guests or special announcements.
5. Play new songs.
6. Provide any necessary additional explanation of the theme or topic.
7. Play more new songs.
8. Sum up the theme or topic.
9. Say goodbye, and "tease" the topic of the next podcast.
Although a podcast can theoretically last for hours, in practice, large audio files
become unwieldy very quickly. Listener patience isn't infinite, either, so unless you
have an absolutely fanatical audience, limit your podcasts to a half-hour or less.
Some of my favorite podcasts are only two to five minutes long, and they're designed
so that you can listen to as many in a row as you like. If you have a ton of material,
breaking it up into smaller chunks is definitely the way to go.
The many Mays to record sound
An increasing number of portable devices
have audio-recording capabilities. Most
smartphones record audio, laptops have
built-in microphones, and MP3 players
either record or use after-market add-ons.
Professional radio reporters have long used
minidisc recorders to capture high-quality
audio, whereas some old-school podcasters
just use cables to hook tape recorder head-
phone output into their computers' micro-
phone input.
Podcasters are increasingly conducting
interviews or round-table discussions using
Internet telephone services like Skype or
Vonage. These Voice over Internet Protocol
(VoIP) services allow users to digitally
record conversations without having to
resort to recording conversations over plain
old telephone lines (and entangling them-
selves in wires and iffy legal ground).
However, because VoIP conversations are
monaural and most listeners are used to
high-quality stereo, podcasters are using
workaround methods to conduct interviews
over the phone. For example, each party to a
conversation simultaneously records it into
a high-quality stereo microphone. Then, at
the end of the interview, both parties edit
and clean up the audio, e-mail their audio
file to each other, and then stitch together
the files to get both (or more) sides of the
conversation.
Even if you can't get high-quality recordings
of both ends of a conversation, the host
should record into a microphone even while
the rest of the conversation is recorded over
a phone line or VoIP connection.
Part III: Goinq Web 2.0
Recording a Podcast
D roseate
Stuff you
Need to Knou)
Toolbox:
\* Audacity (a free audio
program available at
http : / /audacity .
sourcef orge . net)
A microphone
Your own voice (and
anyone else's you want
to invite)
\* A script, if you want to be
more formal; or at least,
a good outline
Time needed:
Varies, depending
upon how much
material you want
to record
Recording an audio file can be as simple as speaking into the micro-
phone on a computer headset or as complicated as setting up a dozen
high-end microphones and a mixing board to get clean sound from
every instrument in a chamber orchestra. Either way, the basic princi-
ples I cover in this chapter are the same.
Many audio professionals believe that the most important link in the
chain is this first one: that using a bad or inappropriate microphone
taints the audio from the get-go. The old computer industry axiom
"Garbage in, garbage out" applies here as well. The good news is that
quality microphones are more affordable than ever, and a microphone
that costs less than $100 online or in a basic electronics store fulfills all
but the most demanding needs. The bottom line: You can use your com-
puter's built-in microphone, but a good external mic provides better
sound quality.
A simple option is to record directly into your computer, which is easy
enough because most newer computers sport a microphone port. (It's
usually red or pink and located next to the green port where you plug in
headphones.) An even simpler option is to use a USB microphone.
Although USB microphones aren't ideal for recording music, they are a
snap to use and configure, and often come integrated into headphones,
making it easy to record while also monitoring sound. Whatever you
choose, just plug in a mic and then follow these steps to start recording.
7. Launch a sound-recording program,
such as Audacity, as shown here.
You find a list of some of the more
popular software choices in the side-
bar at the end of this step list. I chose
Audacity for this chapter because it
has enough features to empower
beginners to produce decent-
sounding podcasts, it works on both
Macintosh and Windows computers,
and it's free. (Y ou can download it at
http : / /audacity . sourcef orge .
net and use it to follow along with
this task. If your copy of Audacity is a
different version, you might see
minor screen differences.)
£i Audacity
File Edit View Project Generate Effect Analyze Help
r^ll B \\S3A
9
www
TT
7R
H>) m 36 24 -12 0 ^ a
36 24 -12
■10
4 %
It
-H-|»»| o \o\ * \p
1.0 0|.0 1.0 2.0 3.0 4.0 5.0 6.0 7.0
Project rate: 44100 Cursor: 0:00.000000 min: sec [Snap-To Off]
Before you begin recording, make sure that neither the computer nor the microphone is muted. This advice
sounds simple, but even seasoned professionals can tell stories about apparently recording beautiful sounds,
only to find (too late!) that their files contained silence.
Chapter 12: Podcasting Your Own Show *J
2.
Don't be overwhelmed by the mass of buttons,
bars, menus^ icons, and level meters that make
the upper-left area of the
he menu bar, are some famil-
iar buttons: left to right, you've got Skip to Start,
Play, Record, Pause, Stop, and Fast Skip to End.
If your microphone is ready to record, just click
the red Record button (the one with the big red
circle) and say something into the microphone.
(Sing a song, recite a poem, or act like you're
creating your first radio show!)
£1 Audacity
F
: ile
Edit
View Project
Generate
Effect
Analyze
Help
I
9
V V
Id
V V V
P
*
7 h J> r.^ii
^ 1
It
niHni
O
p
p
■++-
P
\ — i
L
-1.0
1
j
0^0
i
i
.0
1
_l
2.0
1
3.0
^7
d Audacity
File Edit View Project Generate Effect Analyze Help
J
• (7,
V
H>) a -36 -24 -12 0 ^ s -36 -24 -12
3]
aiHni
1.0
P P
1.0
2.0
3.0
4.0
5.0
6.0
7.0
X Audio Track '
Mono, 44100Hz
16-bit
Mute Solo
4^'
1.0
0.5
0.0-
-0.5
-1.0
Stop
Project rate: 44100 Cursor: 0:00.000000 min: sec [Snap-To Off]
3- As you record, you see the sound represented as a spectrum across an audio track.
Notice the two volume meters in the top-right corner of the workspace: The one on the
left (the little speaker icon) shows the playback volume; the one on the right (the micro-
phone icon) shows the volume of the microphone you're using to record. Under the
volume controls, the drop-down menu enables you to pick from a list of sources, includ-
ing microphone, line-in, aux(iliary), CD player, or stereo mix. Click the Stop button to
stop recording, or click the Pause button to pause. (Be aware that Audacity will auto-
matically rearrange the position of the various buttons and control panels, depending
on how you size the window. So if your screen shows the buttons in one row, two rows
or whatever, click and drag on the handle in the lower right corner of the screen to
make your window match the screenshots here.)
Many beginners erroneously assume that louder is better when recording. Like a teenager with a new car stereo,
they want to crank the noise to 1 1 on a scale of 1 0. If you record with the volume set to its highest level, you
get distortion — or worse, listeners unsubscribing from your podcast feed.
2^8 Part III: Going Web 2.0
ecording, click
h30to§ bultBV JHen click the Play
button to play baclc what you
recorded. Use the volume controls
to adjust the playback sound.
Remember: Make sure you click the
Stop button and not just the Pause
button. With the recording set to
Pause, you won't be able to play it
back or to save it.
£i Audacity
File Edit View Project Generate Effect Analyze Help
infill
p
B 1(^1
n)C+ mj \\J mj mj
<>) a -36 24 -12 0 ^ s -36 2A -12
\ \-$g<- Output Volume: 0.7 ^ c
-1.0 " 0.0 1.0~~
X | Audio Track ▼
1.0
Mono, 44100Hz
16-bit
0.5
Mute Solo
0.0
-0.5
L Q R
-1.0
Project rate: 44100 Cursor: 0:00.417959 min: sec [Snap-To Off]
£1 Audacity
File Edit View Project Generate Effect Analyse Help
New
Open...
Close
Ctrl+N
Ctrl+O
Ctrl +W
Save Project
Save Project As...
Ctrl+S
Recent Files...
Export As WAV...
Export Selection As WAV...
Export As MP3...
Export Selection As MP3.,.
■ ■ ■
0 p
5. To save the recording, choose FileOSave
Project and then name your file. This step
saves your sound file in an Audacity format
( . aup) and preserves your recording in the
best format for editing in Audacity. To create
a new file in Audacity, choose FileONew, and
you're ready to start recording again in a
new window.
Export As Ogg Verbis,..
6. When you're ready to publish your recording to the
Web, use Audacity's export features. To export an
Audacity file, choose File and then choose from any of
the export options: WAV, MP3, or Ogg Vorbis. If you plan
to publish your recording on the Web, your best option
is MP3. Choose FileOExport As MP3 and name your file.
Congratulations! You just took the first step toward
having your own podcast. In the next task, you find
instructions for editing a podcast.
Aud achy
File Edit View Project Generate
New
Open...
Close
Save Project
Save Project As..,
Recent Files.,,
Export As WAV-
Export Selection As WAV,,.
Effect Analyze
r=
Ctrl+N
Ctrl+O
Ctrl+W
Ctrl+S
2.0
_L
Export As MP3
Export Selecti
on As MP
3.
Export As Ogg Vorbis,..
Export Selection As Ogg Vorbis.,,
Export Labels.,,
Export Multiple..,
Page Setup..,
Print,..
Exit
Chapter 12: Podcasting Your Own Show
Audio recording programs
\s you can use to record and edit
_ _ lines-range from free to quite expen-
sive, depending on the level of control you
want and whether you want to be able to
compose original music. This list describes
some of the most popular programs among
podcasters and audio editors:
W Audacity: This popular audio-editing
program has more than enough fea-
tures to produce a great-sounding pod-
cast, and it's available for Mac, Windows,
and Linux systems (which is why it's
featured in this book). Audacity is free.
W GarageBand: Included on new
Macintosh computers (OS X only),
GarageBand is used by many podcast-
ers who are looking for a quick and auto-
mated solution that's easily integrated
with iTunes. GarageBand is free.
w Adobe Soundbooth: A more powerful
and professional editing tool,
Soundbooth comes bundled with other
media programs in the Adobe CS4 suite.
Soundbooth is aimed at people who
want to be able to control a few aspects
of their sounds but want menus with
simple, easy-to-understand choices.
Solo, the program costs $199 and has a
free 30-day trial period.
v 0 Adobe Audition: You can use this tool,
intended for full-fledged audio engi-
neers, to compose music and adjust and
filter voices using complex and exacting
processes. It costs $399 and has a free
30-day trial period.
w Propaganda: Propaganda is designed to
help record and distribute podcasts.
Although it has simplified sound-editing
tools, you can preview your recording
on your iPod or mobile device, and it
writes the RSS code for you. Propaganda
costs $49 and has a free 30-day trial
period.
SnapKast: SnapKast ($79) bills itself as a
"one-click" podcasting solution that not
only records and edits sounds but also
creates RSS and handles the uploading
and syndication chores.
w MyPodcast Recorder: Offered as a free
download from MyPodcast.com, this
simple recorder offers one-click installa-
tion and a very stripped-down interface.
The drawback is that you have to put up
with its ads on the site as well as the ads
that are inserted into your final
podcast.
If you're prompted to install the file lame_enc . dll to complete MP3 encoding, just return to the
http : / /audacity . sourceforge .net site and search for "lame_enc.dll" to find the necessary
file and simple instructions for downloading and selecting it in Audacity.
250 Part III: Going Web 2.0
Editing a Recording
st u ft you
Need to Knou)
Toolbox:
\* Audacity
A recording that can be
opened in Audacity
Time needed:
A couple of hours
In this task, you perform basic sound editing to clean up a recording.
You don't have to use editing tools. In fact, some podcasters wear their
rough-and-scratchy recordings as badges of honor as proof that they're
part of an insurgent media that rejects (what they perceive as) smooth,
polished, and fake corporate style. If this is your ethos, then by all
means, don't edit your sound files.
Most people, however, prefer to listen to recordings that don't sound
like they were made in a gravel-sorting machine. And, if you ever ven-
ture into the field to do interviews or record your child's solo in the
school play, you'll probably need to fix the volume or noise level or the
big, scratchy thud of Aunt Edna's elbow knocking the microphone off
the table.
Here are some basic sound-editing tips to help you reduce noise in your
recordings, cut and paste segments, and normalize your recordings
(make the too-soft parts louder and the too-loud parts softer). I encour-
age you to explore beyond these simple steps.
/. if your sound-recording program (such as
Audacity, shown here) isn't open already,
launch it and then create a recording or open
an existing one.
O Audacity
File Edit View Project Generate Effect Analyze Help
New
Open...
Close
Save Project
Save Project As...
Recent Files...
Ctrl+N
Ctrl+O
Ctrl+W
Ctrl+S
■ i i
2.0
Most audio programs have tutorials and Help files to explain what all the arcane jargon means (although if you
can explain to me under which circumstances I would want to use a Hilbert transformer rather than a Dyson
compressor and a transient mangier, I'm all ears).
Chapter 12: Podcasting Your Own Show £^ /
a city
File Edit View Project Generate Effect Analyze Help
*"q V "J V V
on- p
P
p
2.0 3.0 4.0
i.i.i
V 5.0
6.0
X Audio Track
Mono, 44100Hz
16-bit
Mute | Solo |
R
1.0
0.5 1
0.0
-0.5
-1.0
-^64^ ^- lift
2. To listen to the entire recording, click the Play
button at the top of the workspace. You should
hear your voice (or whatever you just recorded)
playing back. Notice that every time you hear
noise in the recording, you see a corresponding
spike on the graph in the Audio track.
3- To listen to a portion of the recording, click any-
where on the recording in the audio track area,
and you will see a vertical dotted line appear
across that portion of the recording. Click the
Play button; the recording will start from the
location of your marker on the track.
a city
File Edit View Project Generate Effec
Audio Track
Mono, 441 00Hz
16-bit
Mute Solo
i
1.0
0.5 I
0.0-
4- You can rearrange or delete sections of sound to
make a better or shorter recording. Each of the follow-
ing steps begins with selecting part of the sound file.
Look in the small toolbox at the top of the workspace.
(The toolbox has six tools, including Zoom and Time
Shift.) Click the Selection Tool (which looks like an
I-beam) to make it active before the next step.
6.0
i
7.0
i
0.0
I
5. To delete a noise (such as a sneeze),
click and drag to select that section,
and then press the Delete key. Or you
can choose EditODelete, or press
Ctrl+K (Windows)/Option+K (Mac).
You can also delete "non-noise," like
a pause. Read more about this in the
sidebar, "Getting rid of 'dead air'."
You can easily recognize silence in
the audio track by its flat line in the
sound spectrum graph. To adjust
the selection, click and drag on
either side of the selected area to
enlarge or reduce the selection.
252 Part III: Going Web 2.0
i > Audacity
File ( Edit ] View Project Generate Effect Analyze Help
Undo Record Ctrl+Z
an'tRedo ■ Ctrl+Y
Drorjr3poM
A Paste Ct
rl+X
trl+C
Ai
Mor
16-
Mu
Select.
Paste
Ctrl+V
Trim
Ctrl+T
Delete
Ctrl+K
Silence
Ctrl+L
Split
Duplicate
Ctrl+D
\p\%\&\
5.0H 6.0
■ ' ■
www
(5. To cut or copy a section of sound, click and
drag to select the section in the audio track,
and then choose EditOCut (or Copy). Click
and drag on either side of the selected area
to enlarge or reduce the selection.
7- To move the cut or copied sound to another
part of the recording, click to place the cursor
where you want to add the sound in the audio
track, and then choose EditOPaste. The word
or phrase is pasted into that point in the
recording.
V (rJ »
i lay i. ■_■ 1 1 1 1 l i i_i i iuu(j-(jia
iK-lmHni
P
p
P P
3.0
■ 4.1
] 5.0 6.0
i.i.
1.0
0.5
0.0
■0.5j
-1.0
a city
File [ Edit View Project Generate Effect Analyze Help
Undo Record Ctrl+Z
Can't Redo Ctrl+Y
P
Ai
Mor
16
Mlt
-V£,- rf
Cut
Copy
Paste
Ctrl+X
Ctrl+C
Trim
Delete
Silence
Split
Duplicate
Select.,.
Find Zero Crossings
Ctrl+V
Ctrl+T
Ctrl+K
Ctrl+L
Ctrl+D
III!
5.0
P
> — <
8. To hear the results of your editing, click to place the
cursor where you want to begin playback, and then
click the Play button.
To listen to only a particular section of the recording, click and drag to select the section and then click Play.
You can then adjust the selection in the recording until you have just the part you want to cut, copy, or delete.
Chapter 12: Podcasting Your Own Show 233
Audacity includes many effects to improve
or alter your sound recordings. To apply an
effect, you must first select the part of the
recordini you want to apply it to. Click and
aj|o\MecG portion of the recording, or
crrt^sSTaiuvSelectOAll to select the entire
open recording.
Project
Generate
Effect
V V V
+
>»
um-
A
4.0
1.0
0.5
0.0
-0.5
-1.0
Selection: 0:00.000000 - 0:
Repeat Last Effect
Amplify,.,
Bass Boost...
Change Pitch,,.
Change Speed...
Change Tempo,.,
Click Removal...
Compressor...
Echo-
Equalization...
Fade In
Fade Out
FFT Filter...
Invert
Noise Removal,,.
Normalize...
Nyquist Prompt
Phaser,,.
Repeat...
Reverse
Wahwah...
Cross Fade In
Cross Fade Out
Delay...
Ctrl+R
3
Off]
i > Audacity
File ( Edit ) View Project Generate Effect Analyze Help
P
4
Undo Record
Can't Redo
Ctrl+Z
Ctrl+Y
Cut
Ctrl+X
Copy
Ctrl+C
Paste
Ctrl+V
Trim
Ctrl+T
Delete
Ctrl+K
Silence
Ctrl+L
Split
Duplicate
Ctrl+D
Select...
►
Find Zero Crossings
Z
"J m J V
9
r
5.0H
6.0
7.d
L
Selection Save
All k Ctrl+A
Start to Cursor
Cursorto End
10. One of the more commonly used options on the
Effect menu is Normalize. When you normalize a
recording, you balance out the highs and lows,
to make the overall volume more consistent. To
apply the Normalize effect, select the part of the
recording you want to apply it to and then
choose EffectONormalize.
/ 7. In the Normalize dialog box, mark both check boxes for
default normalization. Click Preview to test how the
effect will alter the sound of your recording. If you're
happy with the result, click OK to apply the effect.
Normalize
Normalize by Dominic Mazzoni
W Remove any DC offset (center on 0 vertically)
W Normalize maximum amplitude to -3 dB
E3
Preview
3
Cancel
□ K
256 ^rt III: Going Web 2.0
72. Experiment with the effects, and remember
that you can apply them to any selected part
or all of the recording. Click Play to test your
k, and if
>u don't like the results of an
IditOUndo to remove it.
Audacity
[ File 1 Edit View Project Generate Effect Analyze Help
New Ctrl+N
S I US-
Open...
Close
Save Project
Save Project As...
Recent Files...
Export As WAV...
Export Selection As WAV..
Export As MP3...
Export Selection As MP3...
Export As Ogg Vorbis...
Export Selection As Ogg Vorbis...
Export Labels...
Export Multiple...
Page Setup...
Print...
Exit
Ctrl+O
Ctrl+W
Ctrl+S
Ll
R
' T ' - - T ' I * ' • 1
H)) a -24 0 f> m -24
P P
•++• » — <
5.0 6.0 7.(
_ i i . i ■ i
' ffr ||
) 8.0
Project rate: 44100
Cursor: 0:08.254694 min:sec [Snap-To Off]
J
13. When you're done, choose FileOSave Project to save the recording in Audacity
format. Then choose FileOExport to save the recording in a suitable format,
such as MP3, before you publish your podcast to the Web.
Getting rid of "dead air"
Even with only the most basic understanding
of audio editing, you can move a song from
the beginning of your podcast to the end, or
move the response to an interview question
to the beginning, to use as a "teaser."
Your goal should be to interest listeners
immediately and then keep them interested.
One of the best ways to do that is to delete
all "dead air/' such as pauses and other
quiet spots. This skill is essential for produc-
ing a tight, efficient podcast. Remember that
listeners have lives too, and if you ask them
to wait around for a couple of minutes while
you fumble, they will become frustrated.
Some podcasters who are obsessed with
deleting all the dead air between words
review their recordings repeatedly, to
shorten the spaces between words as
much as possible. Although it's sometimes
helpful to remove the extra breaths and
any instances of "urn" and "uh" between
sentences, if you go too far, your recording
sounds like you drank too much coffee and
are babbling like a tobacco auctioneer.
Try to strike a balance. You want your
recordings to sound natural, like a conversa-
tion you're having with your listeners (with
all the boring parts cut out). Experience will
gradually teach you the sweet spot.
Chapter 12: Podcasting Your Own Show 233
Publishing a Podcast
1** — Stuff i/ou —
Afee^ to Know
Toolbox:
A recording saved
in a Web format,
such as MP3
An Internet connection
An account with a blog,
Web site, or podcasting
hosting service
Time needed:
About an hour
How you publish your podcast depends mostly on where you plan to
publish it.
In the early days of podcasting, sites offering to host your files for free
were springing up all over. Unfortunately, some of the sites were used
to facilitate music piracy. Multimillion-dollar lawsuits filed by the
recording industry have caused many sites that hosted podcasts to
drastically restrict their offerings, or go completely out of business.
Gcast (www. gcast . com) is an intriguing site that's still standing, offer-
ing not only free hosting for your podcast but also integrated access to
podcast-safe music (that is, music you can use without getting into
copyright trouble) at its sister site, www. garage-band. com.
If you have a blog on one of the popular blogging sites, such as TypePad
or Blogger, you find instructions and features designed to help you add
a podcast almost as easily as you add a post.
Find out more about creating and publishing podcasts at these online
services and other resources:
Apple iTunes: (www. i tunes . com) One of the most popular
podcasting sites on the Web, iTunes makes it easy to download
and play podcasts from a broad range of sources. And, you can
use iTunes with a PC; you don't have to use a Macintosh or an
iPod.
The Podcast Network: (www. thepodcastnetwork. com) This
site features an international collection of podcasters, useful
tutorials, and helpful tips and tricks about podcasting. However,
they are asking their audience to contribute $20 per month just
to listen to podcasts, and require that you already have an audi-
ence of at least 500+ listeners before they will consider hosting
your podcast.
Podcasting Tools: (www. podcasting- tools . com) Filled with
tutorials and links to audio, editing, and other types of tools,
you can find many excellent resources on this site.
Podcast Alley: (www .podcastalley. com) Find a wide variety
of podcasts, podcast software, and instructions for creating and
publishing podcasts at Podcast Alley.
SolidCasts: (www. solidcasts. com) Here you can find free
hosting for your podcasts although only about 100MB of space.
Because even a low-quality, half-hour podcast can run about
15MB, this is a good place to start, but if you're serious about
podcasting, you will quickly either run out of room or have to
start shelling out money to upgrade to more storage space and
bandwidth.
256 Part III: Going Web 2.0
Mixing in music
tQjpve to be a wannabe DJ to
wfoilc in your podcast. Even if
you're participating in hard-hitting inves-
tigative reporting or archiving your dad's
favorite fishing story, music can spice
up the recording and make it seem more
professional.
You can also add funny sound effects or
snippets of dialogue from TV shows or old
movies. Just make sure that you have the
legal right to use any music or other type
of recording. Type free music into any
search engine to find places where you can
download sound files. Be careful, however,
because many of the sites that used to be
free have started charging for the music,
and don't hit you with the fees until you try
to download.
Here are a few sites where you can still find
free music (or at least low-cost royalty-free
music): Musicalley.com, GarageBand.
com, Netlabelindex.com, Magnatune .
com, CCmixter.org, SoundClick.com,
and Freemusicarchive.org.
You can add a music track to a sound file in
a program like Audacity by using the Import
feature, listed on the Project menu. Adding
a basic audio track isn't difficult, but man-
aging all the format options, permissions,
and settings can become complicated,
and is well beyond the scope of this book.
However, you'll find many great books and
online resources if you want to become more
proficient in podcasting. One place to start is
Expert Podcasting Practices For Dummies,
by Tee Morris and Evo Terra (Wiley).
Chapter 13
DropBcMMfjmedia: Adding Flash, Audio,
and Video
Tasks Performed
in This Chapter
^ Adding a Flash animation
i> Inserting Flash video
Comparing audio and
video formats
is Uploading videos to
YouTube
Inserting a YouTube
video into a Web page
ake your Web pages sing and dance by adding audio,
video, and other multimedia to your pages. If you want
to provide a richer experience for your users, to show rather than
just to tell, or to entertain as well as inform, add animation or
video. Not only does multimedia help tell stories more vividly, it
can also make you look more professional.
And adding animation or video isn't as hard as you might think.
One simple way to add video to a Web page is to upload a video
file to YouTube (or search for video already on YouTube) and then
insert it into your page. You find detailed instructions in this chap-
ter for using video on YouTube, Vimeo, and other video hosting
and social networking sites. You also find step-by-step instructions
for using Dreamweaver to insert Flash animations and videos in
into your Web pages.
Perhaps the most complicated aspect of multimedia on the Web is choosing the
best format for your audience, which is why this chapter starts with a primer on
audio and video formats and how multimedia works on the Web today.
Playing Animation and Video on the Web
When you add video or any other kind of multimedia to a Web site, your visitors
may need a special player to play your files. A player is a small program that works
alone or with a Web browser to add support for functions such as playing audio,
video, or animation files. Among the best-known multimedia players are Adobe
Flash Player, Windows Media Player, and Apple QuickTime.
The challenge is that not everyone on the Web uses the same player, and your site
visitors must have the correct player to view your multimedia files. If your visitors
don't have the right player, your video or animation file won't be displayed at all.
If your multimedia file can't be displayed, you can include information on where to
258 Part III: Going Web 2.0
download most players for free, but many visitors find these messages confusing or
irritating. As a result, many Web developers help out by doing one or more of the
following:
ash: By far the most widely used multimedia player, Flash supports
audio, and animation.
Offer audio and video in two or three formats: For example, you can insert a
video in the Flash format and then include links to the video in Windows Media
Video and Quicktime so that visitors can choose the format that best fits the
player they already have.
The same multimedia files in different file sizes: Including multiple versions
of the same video in different sizes enables visitors with slower connection
speeds to get the video file faster, while still providing a higher quality version
for visitors who do have high-bandwidth connections.
Information about where to find the necessary player: It's always good prac-
tice to include instructions about where visitors can download any player
needed to view files, but keep in mind that won't work for everyone. Many
people surf the Web from offices, libraries, and other locations where they are
unable to download and install new players (which is why choosing the popu-
lar Flash player or providing multiple versions are the safest options).
Comparing popular Video formats
One challenge to working with video on the
Web is choosing the best format. This list
briefly describes the most common digital
video formats and their file extensions and
supplies a Web address where you can find
out more about each program.
Flash Video: Because the Flash Player is so
commonly used on the Web, many develop-
ers consider Flash one of the best options
for sharing video on the Web. Videos can be
converted into the Adobe Flash Video format
(which uses the . f lv extension) with the
Adobe Media Encoder (www . adobe . com).
Windows Media Video: Developed by
Microsoft and popular on PCs, Windows
Media Video is another popular format
which uses the .wmv extension. See www.
microsoft . com/windows /windowsmedia.
QuickTime: The QuickTime video format,
which uses the .mov extension, is popular
among Macintosh users because the player
is built into the Mac operating system
(although QuickTime files can be viewed
on Windows computers with the QuickTime
player). See www . quicktime . com.
AVI: Created by Microsoft, the Audio Video
Interleave (AVI; .avi) format is one the
most common video formats on Windows
computers, and it can play on most common
video players. AVI works well if you're view-
ing video on a CD or on your hard drive,
where the file doesn't have to be down-
loaded, but you can't optimize AVI files well
for use on the Internet. If your files are in
AVI format, you should convert them to one
of the other formats before adding them to
your Web site. Otherwise, you force visitors
to download unnecessarily large video files.
You can find more information if you search
for AVI at www. microsoft . com.
Chapter 13: Multimedia: Adding Flash, Audio, and Video 259
No matter which player and format you choose, I recommend that you
i
DropBookt
Make it easy for people to turn off sound. Remember that many people surf
the Web in libraries, offices, and other places where unexpected sound can be
ig, disruptive, or worse. If you get someone in trouble for surfing the Web
iir cubical, they may never come back to your Web site. I recommend you
always warn people before you play video or audio, and always provide a way
to turn off the sound quickly and easily if necessary.
Optimize your video for faster downloads. Optimizing multimedia for the
Web works much like it does with images: the smaller the file size, the lower
the quality but the faster the file download. One task in this chapter shows you
how to optimize a video with the free Adobe Media Encoder.
Working u/ith Adobe Flash
Most of the tasks in this chapter focus on techniques using the Flash video and anima-
tion formats because Flash has clearly emerged as one of the most popular technolo-
gies for creating animations as well as videos for the Web. Indicative of its popularity,
YouTube converts videos into the Flash format for display on its Web site.
Flash animation files use the file extension . swf . Flash video uses the . f lv exten-
sion. You can easily insert Flash animations and Flash videos into your pages using
Dreamweaver.
Before you choose Flash, though, you should be aware of its few downsides:
Flash isn't supported by most mobile devices, including the iPhone and
Blackberry. (Check the iPhone and Blackberry Web sites for updates as this
may change in the future, but as of the writing of this book, if you visit a site
built in Flash with an iPhone, you just get a blank page.)
Flash doesn't always print well. Many people like to print Web pages, espe-
cially pages that include instructions, directions, and other important refer-
ence material. If you include that information in a Flash animation which can't
be printed, consider including a simple XHTML version as an alternative.
Flash can cause accessibility problems for visitors with disabilities unless you
create an alternate text option for Flash files. Similarly, text included in Flash
files isn't easily read by search engines (although including alternative text
can help with this limitation, too). You can add Alternative text to a Flash file
in Dreamweaver by clicking to select the Flash file, and then entering a text
description in the Alt field in the Property Inspector.
j> Some people deliberately block Flash files because they're often used for
advertising or to create animated introduction screens that look pretty but
don't offer much value to site visitors. (You may want to describe what they're
missing.)
Despite these downsides, adding a little Flash video or animation can add a lot of
life to your site. And, if you're not designing your entire site in Flash, it's generally a
safe format choice for adding a little video, audio, or animation to your Web site.
200 Part III: Going Web 2.0
Inserting a Flash Animation file into a Web Page
DrojaBAito
stuff you rieed to
Know
Toolbox:
Adobe Dreamweaver
w A Flash file in the SWF
format (sample file avail-
able for download from
www. Digital
Family . com/diy)
Time needed:
About an hour
Flash animation files are relatively easy to insert into a Web page when
you use Dreamweaver. In this section, I assume that you have a com-
pleted Flash animation file and that you want to add it to your Web
page. To create a Flash file, you need Adobe Flash or a similar program
that supports the Flash format. (If you want to know how to create
Flash files, check out Adobe Flash CS4 For Dummies, by Ellen Finkelstein
and Gurdy Leete, from Wiley.)
You insert a Flash file in much the same way as you insert an image file,
but because Flash can do so much more than a still image, you choose
from a variety of settings and options for controlling how your Flash file
plays. Before you start, make sure to move or save the Flash file into the
main root folder of your Web site (see Chapter 6 for detailed instructions
about setting up a site in Dreamweaver and identifying the root folder). If
you like, you can create a subfolder to store your Flash files inside your
main site folder, just as you might create an images folder for images.
To add a Flash file to a Web site, first open an existing page or create a
new document and save the file, and then follow these steps:
7. In Dreamweaver, click to insert the
cursor where you want the Flash
file to appear on your Web page. In
this example, I'm inserting it into a
div tag in the middle of the page.
You can read more about div tags
in Chapter 6.
U1V a
Fib Edt Vimv In-irt Unity Fmmtf Gommindi Wind™ Hilp
IHiJ H
Sam* tvfl
i
Led. I ^Spft jj W< I ««w j» i
K iv! ire ire F.w EffTTTTl^rr
Tik: PmSs HwHtadFfei "Twtst Oft. i, r W ^ pj^
• WHFH1FS
Lfe,CS3
iaaMdMMhMhMtoUMgMMtoU I* I r M 1 1 ll 1 1 II 1 1 1 *0 r
I l(rtpl4W.RlEiM L LLtiKlfl
Russia Hevisited i
■3: HfPdW.
II FiHlUr*
A Htr#ifri&tf
7 ■ Vtodm : ftjgn
£ 5 — ■ ; ■ - ■
■ Rusma Rrusitd RmrTaur Mprcaw Ft i IVtarkaL Cold War hlusflun
J
The Mo-stow Flea Market
r
i • ■ . . ■ ■
• - j
-ipiOt.OlfUflTi
— tllXMfr
fi: Beta
_ fl x
1 IKJ Tt« ~ |;
■ :.. :- ■ :
~ & e | & y ■
| Q-H1N- I Ftrrrrt |p»-«ar«Ji t| OdJS n™
D J
E hot*
e= u j rat
(?)
LK4ine3
r-i
lhi.nrhd.hbnl
< :JLj
■ 1 local items sptactad bala
r
i£ F
Chapter 13: Multimedia: Adding Flash, Audio, and Video
°» o.
File Edit View Insert j Modify Format Commands Site Window Help
2. Choose InsertOMediaOSWF from the menu. You
can also choose Common from the Insert bar, if it
isn't already selected, and then choose SWF from
the Media drop-down list. (Note, if you are insert-
ing a Flash video file, you would choose FLV.)
3- In the Select File dialog box that opens, browse
your hard drive to locate the Flash file that you
want to insert in your page, click to select the
file, and then click OK. You can also double-click
to select the file.
dw Select File
Select file name from: » File system
Data sources
Site Root
Server.
Look in: ^ flash ▼ & t 9 0<r
Name Date modified Type Size Tags
CjQ Dancing_Russian_Dog_iStock.zip ^Russian-Dancing-Dog.fla
ffi Russian- Dancing-Dog.swf Russian- Dancing-Dog .txt
Wt Russian-Dancing-Dog-v2.fla Russian-Dancing-Dog-v2.swf
File name:
R ussian-D ancing-D og. swf
Files of type: All Files (".")
OK
Cancel
3
URL: f lash/R ussian-D ancing-D og. swf
Relative to:
Parameters..
Document ▼
r-flea-market.html
Change default Link Relative To in the site definition.
Object Tag Accessibility Attributes
Title: Dancing Russian Dog
Access key: Tab index:
If you don't want to enter this information when
inserting objects, change the Accessibility preferences.
— 4.
OK
3
Cancel
Help
If you haven't turned accessibility options off in
Dreamweaver's Preferences dialog, you're prompted to
add alternative text to describe the Flash file. Enter a
short description or name for the Flash file. Use of the
Tab Index and Access Key options is optional. Leave
these blank unless you want to include a special key
command to control the file. Click OK; the dialog box
closes, and the Flash file is inserted into your document.
Because Flash is an open standard, you can create Flash files with a variety of programs, including Adobe
Photoshop Elements (which uses the Flash format when you create Web galleries in Elements), and Adobe
Illustrator (which has an Export to SWF option).
262 Part III: Going Web 2.0
DropBooks
F. Dreamweaver displays Flash as a
solid, gray box that represents the
width and height of the Flash file.
Click the gray box to display the
Flash options in the Property
Inspector at the bottom of the
workspace.
lANVCS FAVORITE * \ B
Fife Edt v*> Jrtitrt Muddy Format QimiYundj la YPVdu* hfcp
Same? Gtsfe ILJ.IJJUJaV ri*MS«t_riouJiHi.t
vt.- unci '.v.(eiiarin*i»aKl'
Russia Pom □ tad finn-Tru Mdecow Flaa Marital Ldd IT/jr Mussum
The Moscow Flea Market
■ 1- I I ..
Mt^nm CTW><P>i*i*Wfrii^iM lT|f3 R TOPS- ■ miW CTKjJJwc UttA
rjwr.mi; ■* 750
rlid-JD tj m>
J- IflDp jipKu _
^ HypHfcil
£ Fumed Anchor
Efj rtiiMrtd RiJt
in? T-i4a
&ulliu rt(h
Jja Nora
■V,
3V Oet-jij*
Sf* * l *a>fc | Hume " | f pthkhh.,
±-=Li
F
Dole TJ3EJ3DDa 2«PH |
| » Or - ■
- * V
■
Fib Edt V*m
Jmttt Muddy Fun run Commands, act Wtdii HHi
■
_^Lnt'«TV
.!5rlL.Wi'fc.lJ|-|>*i*5f-'.irtin*n.-J-i-j lit! 14lJU£S^Hes.wHJ*ll
IUsi f?j»i Pirr»i»J rUi Hflii Jfi,
Russia Rmsiitd Run Tdu Moscow Fk!j MarKs! Cdd "Var Museum
The Moscow Flea M arket
Bw .rudir,
"'"■■IBB
' rat bfitp adrife^ ^Arfojrj prtrrt* <i>KnbrMf ftriilb ?l ^ -4 TOOte v'?ie*Wt sPiJjjwc utjps QUIT-el
w 750 rje fta^u«i(P-I>«F))-Ooo nrf D4 QJ Jis None- ■ ©
U 35D □ =c= ^^^^^^ [ft ""Ejt
Civnrnm ^
J|Li riaittd AKh(r
l ™ r-sUfl
□ HsvtDwTBQ
nil : 1*^1
«irlM
it
— uftcp rw
-rltett'fjrj
— 4t>40 jurtHrt
— *f««i
— iflslE-adetu
ft- O rtJw.i
ftuKiukritJ-Jrri
■II
F
xir
k
fj> 1 la' al tarnt idlKtod lota ; L ig..
6. Click the Play button in the
Property Inspector to play the
Flash file. In this example, the Flash
file is a dancing dog I purchased
from iStockPhoto.com, so pressing
the Play button causes the cartoon
dog to dance on the screen. (Note:
When the Play button has been
activated, the button text changes
to Stop?)
7- Choose FileOSave to save the page. You'll be prompted to also save the related
script files. Dreamweaver saves the files into a folder named Scripts in your main site
folder. Remember: You must upload this entire folder to your Web server for your
Flash file to work properly when the page is published to the Web.
Chapter 13: Multimedia: Adding Flash, Audio, and Video
8. You can make a number of adjust-
ments to the way a Flash file is dis-
played by changing the settings in
Property Inspector: for exam-
@©f^S the file if it s an
lmcffiorff Aurapfay (causes the
file to play as soon as the page is
loaded into a browser), and Quality
(controls how good the file will
look, how fast it will play, and how
long it will take to download).
PROPERTIES
£ SWF, 87K
I [FlashID
HLoop
[TjAiitoplay
W 350
H 350
V space
H space
File
Src
flash/Russian-Dancing-Dog . swf
Bg f~l
Class None
Edit
Quality High
Align
Default
Play
Scale No border
▼ Wmode opaque
Parameters...
Copy Dependent Files
This page uses an object or behavior that requires supporting files. The following files have been
copied to your local site. You must upload them to your server in order for the object or behavior to
function correctly.
Scripts/expresslnstall . swf
Scripts/swf ob jectjnodif ied . js
OK
9. When you finish adding the Flash file to your
page, choose FileOSave to save the page.
You'll be prompted to also save the related
script files. Dreamweaver saves the files into
a folder named Scripts in your main site
folder. Remember: You must upload the
entire Scripts folder, as well as the Flash file,
to your Web server for your Flash file to
work properly when the page is published to
the Web.
Scripts to make Flash function better
When you insert Flash or other multimedia
files with Dreamweaver, the program auto-
matically creates a JavaScript file that helps
the file play automatically. The file, named
AC_RunActiveContent . j s, is stored in
the Scripts folder, which Dreamweaver
automatically creates inside your root site
folder. The first time Dreamweaver creates
this file, a dialog box alerts you that you
need to upload the script in order for your
multimedia file to work properly. Make sure
to include this script (and the entire folder)
when you publish your site on your Web
server. If you don't include it, your multi-
media file may not play properly, or visitors
might be required to click the Play button
twice before the file begins to play.
Part III: Goinq Web 2.0
Converting and Optimizing Hash Video
Stuff you Meed co
Know
Toolbox:
A video file in any digital
format
Flash Video Encoder or
Adobe Media Encoder
program
Time needed:
About an hour
You can convert video from one file format to another relatively easily
by using most video-editing programs. For example, you can open a
video in AVI format in a program such as Adobe Premier Elements (a
good video editor for beginners) and then choose FileOExport to con-
vert the file to any of a dozen other formatting and compression
options.
Editing video gets complicated, and optimizing video for the best qual-
ity with the fastest download time is both an art and a science. The
most basic process of converting a video file isn't difficult, however,
after you understand the conversion options.
This task walks you through the process of converting a video file from
Windows Media into Flash video (FLV), using the Adobe Media Encoder.
In this task, I'm using the encoder that comes with Adobe CS4 Creative
Suite. A very similar, but somewhat more limited version called the
Flash Video Encoder is also included in Adobe CS3 Creative Suite. Both
versions will work fine for this task.
7. Launch the Adobe Media Encoder
and click the Add button to load a
video that you want to convert into
a Flash video file. In this example, I
added a short video clip that was
saved in Windows Media Video
(WMV) format, but you can add
video in a variety of formats,
including AVI, MP4, and QuickTime.
Click the Settings button on the
right side of the encoder to launch
the Export Settings dialog box, as
shown in the next figure.
lil Adobe Media Encoder
Chapter 13: Multimedia: Adding Flash, Audio, and Video 203
D ro pB o o I
OifD« Mare: QlLPsr. &rtfO&i$ J C«if js%
^fjpatWifca v'Etpnt Audio
■ Summary
P W0>«n, 5snw 4t sour* If [»1 Pn^jreww
4 A AC. 12B [Ups], 44.1 MM, Stem
^ 1 Pxt, Ufgst 1 .50 [r**. 1. Ml* 2.00 [Mips]
5cw?5:640w X4dJh
2. In the Export Settings dialog box
that appears, leave the Format set
to FLV and then choose a Flash
encoding profile from the Preset
drop-down menu.
3- You can choose from a long list of presets.
The later the version of Flash and the
larger the size, the better the video will
look. However, a trade-off is involved: Not
everyone has already downloaded the
latest version and not everyone has a high-
bandwidth connection to the Internet. If
you know many people who visit your site
will be using older computers or have slow
connections, you may want to use one of
the lower presets.
Preset: | F4V - Same As Source (Flash
F4V - Same As Source (Flash 9.0.rll5 and Higher)
FLV - Same As Source (Flash 8 and Higher)
FLV - Same As Source (Flash 7 and Higher)
F4V - HD 1080p (Flash 9.0.rll5 and Higher)
F4V - HD 720p (Flash 9.0.rll5 and Higher)
F4V - 1080p Source, Half Size (Flash 9.0.rll5 and Higher)
F4V - 1080p Source, Quarter Size (Flash 9.0.rll5 and Higher)
F4V - 720p Source, Half Size (Flash 9.0.rll5 and Higher)
F4V - 720p Source, Quarter Size (Flash 9.0,rll5 and Higher)
F4V - Web Large, NTSC Source (Flash 9.0.rll5 and Higher)
F4V - Web Large, PAL Source (Flash 9.0.rll5 and Higher)
F4V - Web Large, Widescreen Source (Flash 9.0.rll5 and Higher)
F4V - Web Medium (Flash 9.0.rll5 and Higher)
F4V - Web Medium, Widescreen Source (Flash 9.0.rll5 and Higher)
F4V - Web Small (Flash 9.0.rll5 and Higher)
206 Part III: Going Web 2.0
Dro
4- Click the double arrows to access Advanced Mode for more specific settings if you want
to change any preset options, such as Frame rate, which you can find under the Video
tab. To achieve the fastest download time, set the frame rate to the lowest setting that
still looks good. If you're encoding a video that has lots of action, you need a higher frame
rate — ideally, 24 or better — or else your video loses details and looks fuzzy in places. If
you're converting a video, such as this Windows Media file that has already been encoded,
your best option is to choose Same As Source from the preset drop-down list and leave
the frame rate unchanged.
5. Click the Audio tab to adjust the Bitrate and
other options. If your audio file has only a
single voice, you can set this option quite low,
and it still sounds good. If your audio file has
music, special sound effects, or other multifac-
eted audio factors, set the Bitrate to at least
128 Kbps.
Filters Format Video
▼ Basic Audio Settings
Codec
Output Channels:
Frequency:
Audio Qua
Bitrate Settings
Bitrate [kbps]:
▼ Advanced Settings
V The bitrate used for enco
Estimated File Size:
3 MB
Chapter 13: Multimedia: Adding Flash, Audio, and Video
Send local file to Recycle Bin
You can verify the connection by clicking the 'Test' button
6. Choose the Others tab to enter FTP options;
then you can upload video files to a server
directly from the encoder. When you have all
the settings the way you want, click OK. The
Export Settings dialog box closes, and you
return to the encoder.
Estimated File Size:
3 MB
7. After you have everything adjusted, you're ready to begin
the encoding process. Click the Start Queue button. Hint:
The encoding process can take several minutes, even for a
short video file. A small preview window in the lower-right
corner of the encoder enables you to watch the encoding
process in action. A new file is created in the Flash format
and is saved in the same folder as the original video file.
208 Part III: Going Web 2.0
Dro
Adding flash Video to }/our Site
st u ft you
Need to Knou)
Toolbox:
\* Adobe Dreamweaver
^ A Flash video file (avail-
able from this book's
companion site; see the
Introduction for details)
Time needed:
About an hour
Flash video is fast becoming the video format of choice among many design-
ers. Video on the Web has been problematic for a long time because many
different formats are available and you can never guarantee that everyone
in your audience can view your videos in any single format.
Although the video players have been fighting it out for years, Flash
seems to be winning the game. YouTube offers videos in the FLV Flash
video format and millions of people have the Flash player on their com-
puters because it's small, easy to download and install, and free.
Because Adobe owns both Flash and Dreamweaver, you find support for
Flash files in Dreamweaver. You can use the Insert dialog box to easily set
the many options for how a Flash video plays within a Web page. In the pre-
vious task, you find instructions for converting a video file into the Flash
format. Follow these steps to insert a Flash video file into a Web page:
7. Create a new Web page in Dreamweaver or open
an existing page, and then click to place your
cursor where you want the file to appear on the
page. Select Common from the Insert panel;
then, from the Media drop-down list, choose
FLV for Flash Video. (You can also choose
InsertOMediaOFlash Video from the menu.)
Insert FLV
S3
Video type: Progressive Download Video
URL: Kremlin_l.flv
Browse...
(Enter the relative or absolute path of the FLV file)
Skin: Clear Skin 1 (min width: 140)
► II ■ #
Width:
Height:
H Constrain
Total with skin:
Detect Size
j Auto play
Auto rewind
CP
To see the video, preview the page in browser.
2. At the top of the Insert FLV dialog box that
appears, specify streaming or progressive. Note
that you must have special server software to
stream video. Check with your Internet hosting
service or system administrator to find out
whether your Web server supports streaming
Flash files. If not, select Progressive. Click the
Browse button and select the Flash file from your
hard drive. If the file isn't in your site's root
folder, Dreamweaver offers to copy it there for
you. Remember: The Flash file must be in your
site's main root folder and it must be uploaded
to your Web server in the same relative location
when you upload the page that displays the file.
Chapter 13: Multimedia: Adding Flash, Audio, and Video
3- Next you choose a Skin, which creates a player, or
Flash controller, for your video. The Skin drop-
down list includes a variety of Play, Pause, Stop,
and Volume controls in different sizes and designs
that can be inserted into the page with the Flash
file. When you choose a skin from the drop-down
list, a preview of the selected skin is displayed, as
shown here, so you can see the size and style of
the Flash controller.
4- Click the Detect Size button; Dreamweaver auto-
matically inserts the height and width of the Flash
file into the HTML code. If you want the Flash video
to play as soon as the page is loaded, select the
Auto Play check box. To automatically rewind the
video after it has played, select the Auto Rewind
check box.
Width: 640 [VJ Constrain [ Detect Size
Height: 480 Total with skin: 640x480
d ftuto playj
0 Auto rewind
video.html x
5ource Code
Path: C:UJsers\Artesian Media PC\Documents\web sit
styles, ess* swf objectjnodif ied , js
_^JCode I -5} Split
Title: Russia RevisitedRiver TourFlec [£j w Ije^, ^»
<mmtinstance: editable > <div#video-640> <p>l<object#FLVPIayer>| I ^ Is"") 100% v 762 x 447 v 154K/22sec Unicode (UTF-8)
PROPERTIES
5. Click OK to insert the Flash file and
close the dialog box. The Flash file is
represented in the Web page by a
box that has the same height and
width of the video. Click the box
that represents the video to select
it. You can make further adjust-
ments to the settings in Property
Inspector at the bottom of the work-
space. Click to select the Flash file
to display the Flash properties, such
as size, autoplay, and loop.
49
FLV
W 640 |7J Constrain Reset File Kremlin_l .flv
Class None
FLVPIayer H 480 Total with skin: 640x480 Skin Clear Skin 3 (min width; 260)
Auto play
0 Auto rewind
270 Part III: Going Web 2.0
Drop Books
h video, preview the page
in a Web browser by choosing FileOPreview
in Browser and then choosing any browser
from the menu. You must have the Adobe
Flash Player installed on your computer in
order to view the Flash video in your Web
browser. (Note that the Flash controller,
created by the skin, becomes visible only
when you roll your cursor over the bottom
of the video.)
The Krwnim at iiififct, M«*r.ow, Rossi*
9 Internet I PrDlecled Mode On
HIES
ASSETS
—
(r^ Russia
Local view
ft
i e
0 0
& & @
Local Files
I
i
flash
E] "Ol images
El "(Sl Scripts
E] "Ol Templates
□■■■■(^ videos
Clear 5kjn 3. swf
FLVPlayer_Progres.l^
i
Kremlin, wmv
2.E
Kremlin_l,flv
3.-1
I
Moscow-Bell-Tower. . .
video.html
III
Date: 7/26/2009 1 0:59 PM f
Log.
7. When you insert a Flash video file and include a skin for the player,
Dreamweaver creates a Flash file with the . swf extension and saves it in
your root site folder. This Flash file contains the player controls. It must be
uploaded to your Web site when you publish the page with the Flash file
for the player controls to work on your Web site. In this figure, the file
named Clear- Skin 3 . swf contains the Flash controller.
Chapter 13: Multimedia: Adding Flash, Audio, and Video
Finding out more about Flash on fine
DropBo
sst places to find out more about
files is on the Internet, where a
wide range of Web sites offer everything from
predesigned Flash files that you can easily
customize to useful ideas for getting the most
from this award-winning technology. Here's
a short list of useful sites to get you started:
is 0 Adobe: (www.adobe.com) You find
loads of tips and tricks for creating and
using Flash files (as well as many inspir-
ing examples of Flash in action).
GotoAndLearn: (www. gotoandlearn.
com) You find many free tutorials on cre-
ating Flash files on this site.
SWiSH: (www . swishzone . com) If you're
looking for an alternative to Adobe
Flash, SWiSH is an excellent little pro-
gram that's more reasonably priced.
Flash Kit: (www. f lashkit . com) This site
has a wide range of resources for Flash
developers.
Flash Arcade: (www. f lasharcade . com)
Play some of the best interactive games
created in Flash.
To find out more about advanced Flash settings
"Flash parameters".
, called parameters, visit www . Adobe . c
:omand search for
272 Part III: Going Web 2.0
Upioadinq Videos to \louTube, Vimeo,
>ite$
stuff you
Need to Knou!
Toolbox:
An Internet connection
A video file optimized for
the Internet
Time needed:
About an hour
YouTube has attracted a tremendous amount of attention in recent
years as the place to find Web videos. You can upload your own videos
to www . you tube . com for all the world to see (a great way to garner
free promotion), and use the site to host videos. So why not host your
videos on your own Web server? Because bandwidth costs money,
especially if you get lucky enough to get millions of visits to your video.
YouTube, Vimeo, and others also provide streaming video hosting,
which many Web hosts charge extra for (or don't provide at all). After
videos are uploaded to a site like YouTube, you can then embed them
so that they play within a page in your site. The result is that visitors
see your video on your site, but you don't have to pay for premium
bandwidth.
If you want the greatest possible audience to view your videos, I recom-
mend YouTube. If you want more control over the use of your videos
and how they're displayed in your pages, the premium service at Vimeo
is a great option. Other video hosting services include Photobucket,
Google Videos, and Rewer, which offers advertising revenue for videos
that attract a large audience.
As you see in this short task, YouTube makes it easy to upload videos
and then embed them into your Web pages. Vimeo and other services
are similar. The good thing is that most videos can easily work within
those parameters. If your video is ready to post, follow these steps:
7. Before you can upload videos,
you must first register at
YouTube, a free and relatively
painless process that simply
requires filling out a form on
the site.
5? YciiTuku ■ Broadcast Ifwjrintf. ■ Allr I - h: t ;:l : xcliri"
v H - FSnirtli-; ™ VnuT.-in ■ EfD-idcmVnuinH.
You 021
Broadcasi YdjjkII '
Vtoridm* | Enplsh
Starilta 'juicHj:-1 (a;. | Hdp Sign In
H»n»fl Viibor Slum Cfcawiefe Co>inmn4y
Get started witn your account
i-in -lip ln»fwi nwlrininewhn rhoimn tinK-i.i-ry
r Sbbnh stii bnumB mlllpnii of LDmmmunlf and pabiar
VldBDS
* ■lorn-nenL, r-jlp, and nv*t yeIh nipwiK s 1a t m favoris
mdt-K
* Ltfnad and snara yvj rldeua wtfi mllkina of Pilar u»m
* Sw^(F favnrin YidppF hj wrabh md nhinj Inter
i 't»- H ~
■ -i
J.
rmtorad-e
LflLSi "* 1£ UnnadBlalaB
Dais af Birti _ » ... » ... ■»
Gaidar: OhHH i?FBmB&
, LiLolhnis nnd rrw channel on VnuTLfr: 1 1~< v hare mr email
addrass
lYrodd b rererpt dr>;ananal pinducLnlated email
tommunn sfln-K IhsrYoUTubi t-alKvas would t-j M irtarasl In me
Turns of L's*. Ffeas< imwt( Gk-Se T<rm:- nl £trnce
and I'cjTubu Tan™ nf Uia t*l[r* _
Tnrni-: Df &ap.1ifl
1 . VaurAcwplBncB
ABj UHrHnndYarvBrfngfiiFWflUHlH (ralterfrtifcr.
UpJpidmg mdnrinteHhatipu dnnrriawm n
n nip^nftYtnlntlnn and aoalnst rw Isvh f
unn n- JnuH itvitericj m I rin n.Tt.-jm unnr
[=1
hip fflMwrauLta cdminrnidi Kjjpl&sd
^ kilBinul | Pinter-tad MkH On
Chap«er ,3: Multimedia: Adding Hash. Audio, and Vide. 2 73
m YwilMkv Biuericeei YuanaV, Wkiltm Uimhi-i r<tJi«n
^rxMtu fc*ur-tiBraia-*riinrti
'.l-IMIi tlul.l
MMH|
sun *u rUiu wliif enutl Mitaiefeiialtfi
• ri»M>i wiiittmnii win »wuto
"I
.j i •juikjj in mti bji ctl
Racstofwn Aaltwn
HipnrlMt Do «M aaM-ad My IV tfcean
■laic eMaw. mat* cancel*. 01
iHaim«li alaml -vaHNH anleae
Buy caiatM uallie*/ ad ualnl yau ue.iMU
Tit :-)»:•■/< Te-t and lit Cieanfilf
. 1. 1» , . i . . .j -i ./i ...
fin *t*0 r/a<|K icmcne rtw'« «rri|»1
5f <1rei»| "Uiha4 'A*w'. faj an?
"cimsitii tm it* »it i lilt nt mMc
v.jir«iet fwnj rf'J»» *iltK* )ou cwn il
: >|ya/« ..!>.: ->•• .» >.H.. :»n »
OPFN'
IWU.Y0O1
s^3-25%
at MMCfWMI
LIAAN MOW
2. To upload a video you must first log in, then
click the Upload link in the upper-right
corner of any YouTube page, and then use
the Browse button to locate the video file
you want to upload from your hard drive. Fill
in the fields in the upload form to describe
the video and add keywords to make it easier
for YouTube visitors to find your video when
they search the site.
rl*mt SabsatpHwts
Wisnac
Skowx Ckannufc
SMfCfl
Kremlin
"iiiiii ri
dfcadatfa!TWSs4etr*<»
in*, v. .1 •
Villi . Ill :
I I I ■IIIWIIII II I I 11.11 I S
Ann fattj ftu ja*j|i-i. c^tv
*"4 c«5l« tr* nit*-' : » ■ i
Ire cw* b amrj c»> w
MMIM
IrultxJe tcbted tftfeos
* srww Barter
— En»ltdeWisrJ cocaoes 1~1
***** Onrlings
0 w
Invmiaa ■» Shunt Player
As Hat
Sard » ►*-'.(« «
raoatasjl
a Stalsilcs A. Data
3- When uploading is complete, YouTube displays a confirma-
tion page that includes HTML code you can add to your
own Web site or blog to display your video on your own
site. You can even choose the size and other display set-
tings. To link to a video on YouTube, copy the URL and
create a link in Dreamweaver like you would to any page on
the Web. If you want to embed the video so that it plays
within a page on your site, click and drag to select all text in
the Embed box and then press Ctrl+C to copy it.
2 76 Part Going Web 20
p^rfctyrfe\<L^©your Web page in
fereanweS^P, m^rf the Split View button at the
top of the workspace to view the HTML code of
any page, click to place the cursor in the code
wherever you want the video to be displayed,
and choose FileOPaste to insert the code you
copied from YouTube. (Y ou find more detailed
instructions for adding code from sites like
YouTube in Chapter 6.)
Common "* F
_£Si 1:- I-
Preview in Firefox
F12
arne
Preview in lExplore
Preview in Device Central
Edit Browser List,,,
Ctrl+Alt+F12
ue = 11 true"></
~W fable
■nit. ^..P ra h<i^>i<uR.i ii>, ■ [j^ ^ jl>
3TTV - 1 d= " V "i (140 - 1>1 U " > i
<P>1
<ob:cct ■vidth="C40' 1 •hoiaht=' 1 4SD 1, Xpairaiii-nainc= n niDvic n •
ya Lufi-
"http://wvrur, youtube . com/v/rl c£ugc 64&hl = t n&f 3=lircl=C l 5bo cdc c
-1 11 X/ par aroXpa rain - name- 11 allauFullScEeeri" -value- 11 true" Jnjl
fK.IP^IIFK
rt hits Oa<i
t Cl«( Hint
M E tiled ^ I6re^mhmfcr-1 £3i ffr Pfa >
5. Choose FileOPreview in Browser and then select any
browser you have associated with Dreamweaver to view
your video displayed within the page on your site from
YouTube.
You can always return to the YouTube page to edit your description or keywords and to find the code you need
in order to embed the video in your own site: Click the My Account button and then My Videos, and then select
the video you want from your list of uploaded files.
Choosing }/ouTube Versus Vimeo
Vimeo offers a free service, similar to
YouTube, and also provides a reasonably
priced premium service ($69 per year at the
time of this writing). Vimeo's premium serv-
ice enables you to embed videos as easily
as you can from YouTube, but with more
options for how the video is displayed. For
example, with Vimeo's premium service,
you can remove the Vimeo icon from the
player and remove any mention of related
videos on the Vimeo site. You can also pre-
vent other people from embedding your
video on their sites.
YouTube is free, but when you upload your
videos to YouTube, you give up some rights
to your content. (Read the agreement at
YouTube.com for more details about copy-
right and other legal issues.) Also, you can
only upload videos that are smaller than
100MB and take fewer than 10 minutes
to play. According to the site: "YouTube
accepts video files from most digital cam-
eras, camcorders, and cell phones in the
.WMV, .AVI, .MOV, and .MPG file formats."
You can also upload files in the Flash video
format.
Chapter 14
DropBocfKtekirig Money with Your Site
Question: "How do you make $1 million on the Internet?"
Answer: "Invest $10 million."
It's an old joke, but there's still an element of truth in it today. Although
you can find many stories about Internet millionaires who became
rich with seemingly little effort or investment, the truth is that most
good Internet businesses aren't much different from brick-and-mortar
ones. You need a product or service that people are interested in, you
have to deliver it in a way that's useful and accessible, and you must
be able to promote your business so that customers can find you.
Despite the risks involved, many people are making money from
their Web sites, by using one of these two primary models:
Making money from advertising: You can sell and host ads yourself, or you can
sign up for one of the online advertising networks, such as the exceptionally pop-
ular Google AdSense. In this chapter, you find step-by-step tasks for creating and
integrating advertising using Google AdSense or the affiliate advertising services
Commission Junction or LinkShare, which make it easy to add advertisers to your
site that pay a commission on any sales generated from your visitors.
f Selling products or services online: To sell products or services, you need to
set up a system for accepting payment. Your options range from the simple
(publishing a phone or fax number on your site that customers can call or
send orders to) to the complex (a fancy, integrated shopping cart that enables
visitors to select items as they navigate your site and automatically tabulates
their purchase totals). Somewhere between these two extremes, you can sell
products on sites like eBay or Amazon with little investment (or training)
or set up a simple shopping cart or order button with Google Checkout or
PayPal's one-click service, which you find out about later in this chapter.
In This Chapter
Signing up for Google
AdSense
Inserting code into a Web
page in Dreamweaver
Adding advertising from
AdSense to your site
Setting up affiliate ads
with Commission Junction
Selling products and
services with PayPal
PayPal and Google offer the simplest solutions for selling single products — like
memberships, tickets, or e-books — via a Web site. If you want a more compli-
cated shopping system, read my recommendations in the sidebar "Adding a shop-
ping cart to your site," at the end of this chapter. I don't cover these services in
detail because another excellent book in this series, Web Stores Do-It-Yourself For
Dummies, by Joel Elad (Wiley), explains this type of sales site in depth.
Because this chapter features live Web sites, some screen shots may have changed
since this chapter was written. As a result, you may have to make adjustments to
some of the instructions, although the basic concepts and tasks should be similar.
276 Part Going Web 2.0
Adding Advertisers With Gooqie AdSense
st u ft you
Need to Knou)
Toolbox:
An Internet connection
A Web browser, such as
Internet Explorer or
Firefox
A Web site where you
want to add Google
advertising
A Web page editing pro-
gram, such as Adobe
Dreamweaver
Time needed:
About half a day
You can find Google ads on so many different Web sites that the ads
seem to appear automatically. And in a way, they do. As you see in this
task, you must sign up for an account, select the type of ads you want,
and generate a snippet of code to insert into your own site before you
can include Google ads on your pages. After you set it up, though, the
rest is automatic.
Google has developed an extraordinarily complex system that makes it
exceptionally simple to host its ads — and not just any ads, but ads that
Google can specifically deliver to your pages based on a number of cri-
teria. The little snippet of code that you place in your pages enables
Google to handle several tasks at once, including the ones in this list:
j> Target ads: The automated Google system reviews the
text on your Web pages and matches any relevant key-
words it finds to related ad campaigns.
\^ Deliver ads: After the snippet of code is on your pages,
Google can deliver ads automatically based on keyword
targeting and other criteria.
J** Track traffic: Google measures the traffic to each page
that displays Google ads and tracks the number of people
who view the page as well as the number of people who
click to view the ad.
\^ Measure effectiveness: Using a complex system of data col-
lection and analysis, Google can deliver detailed reports to
advertisers about the success of their campaigns.
\^ Calculate payments: The system keeps a running total
of the income you've earned from your Google ads and
deposits the money into your bank account automatically.
Google makes buying ads as easy as placing other people's ads on your
pages. And the two programs have similar names, which makes it easy
to get confused. Remember this: Google AdSense pays you a few cents
(or a fraction of a cent) every time someone clicks on an ad. Google
AdWords makes it easy for you to buy 'words' so that your ads appear
on Google and related Web sites.
To sign up for Google AdSense, follow these steps:
Chapter 14: Making Money with Your Site
7. Open a Web browser with a con-
nection to the Internet, and
;s www.google.
in Google page,
Advertising Programs
link.
nection to the Inl
DropBOTfe
click the Advertif
Go >gle
Advanced Search
Preferences
Google Search
I'm Feeling Lucky
Language Tools
Advertising Programs - Business Solutions - About Google
©2009 - Privacy
— &,wclif rtdciirlisinc W ill:-*- iIbimI Explain
I " 'Cfl '°*^:. , >->v-"ir p&agli.Hrii; " "I ■ ■ I
*i » E2 " * ^* T Past" Safer*' TDMi- ff
Gougle
Ad^eTS ne Pre grans
Far Advertiser*: Gceal^ Ad'/Vard*
* AriralLia ro people u-archinrj m Goagla and aur
Drhertninq netwnri
* Resc+i peflpirj sCTinpi^- loaknQ toi irnarit^han about
yon praUuat *>J 1 4Mt« ailra
< Eas-iy contial :ajrs- pay Dnlywheu people del: an
your ad
nndc=™-|
Iviuu L
5h yui id vi Ccev«
■ nJ jii j sil r hi il t*
1 P
dJ
Sign up now
RaBBYln ElHff?
Ul/aul mora lubfmatiou ibau! .-Ldttoids? Lean nun t
Find am Iwnui aab^i lesm can ii&w jou resth youi
onlna aiboilKinp. irjili Oarilatl £jL-:
Fm Site r^nert: &pq ale Aimers e
* Mj4imizd fnui :i!u's ibvutjo polorrfial vwlh conlDXIualy lirgnlnd
■ Cusdamue ads to amp I em tut Ihe k»k jnd reel (irynur ste
v TricHha success of riffs rant ■format i and locafiorr: with onfna
reports
PlVrjf .jjlllllJI .1.
Wsiriy id dart?
Sign up pan
Want rrcrr lU'nimaliun annul [ Son Up twrLtai J nnm e.
Looking Ho* An ad imefl Cflack nu1 rjoanle'a ad sern-fl qgiurions
hips &mimv ddddIb tnraiad :uns*in app-srilt-- 1 ■*l=t-nJ_iS-tsnuirain: lindiunra
■ tlnmnl | Pmbclad
On
2. The Advertising Programs
page is split in two sections:
On the left side is information
about buying ads, and on the
right is information about how
publishers can make money
by placing ads on a site (pub-
lishers, in this sense, are site
owners who place ads on a
site). In this task, I focus on
the publisher side of the busi-
ness, so click the Sign Up Now
button, on the right side.
278 Part III: Going Web 2.0
f God-c It- AHSnrjiR Wl-rirvw IHairwl l«p :nm
i , * hKpa . •* •* • ^•aoqkxori
, Fihunic; .Mj buuqh, AtfEinEi
£^ t Q jj t pagtT SafctfT TnnldT
Gougfc Ad Sense
Wbeseb URL
WebCte ISnauane
daiatfimUj'.oim
J Flna:* li:t your primary URL only.
■ Example ei^iie com
Engiuh — Engiah
■ Tallin jnur wflhrip'c primry languaiia tornlp Durmriow
pracaoc.
' I will rat place ad-: on trtaslhal mckida inccfmvK t& clck
I will ml plact ads. on hIes lhal include pnmDqraphic
■ :■ i:
: I : ml? l~ h""ui ii" ari : ii
Aocnu-t 1ypr i2
Caurtrj or terrtcnr:
BuEllBSE
SbIcoI an aEEEunt lypfli
_ J H p*rtart ■ Vnui paympnt InctvMual
thai appfcf 1o you atttesa.eul
number, and accutfe court ij , BP cade, and ctr. EkmiuXb.
^Iew. PltaM oamplttr- all [kid:-
^■ama and hDuea ar sparo-menr.
Paynn rung fli 11 "f"et
Cnnlad namc-
DcpUl Family
-< Payt-t mml bt a imipiny nama. nnl mdividuil
■ Vnui company n«di la hart a bank account hthis name
J ini-rt 'A'an-wr
Smrrh AdSenaa Ha^
IrdDinDl | Pintalad HcttaiCn
3. Fill in the registration form with
your Web site address, your name,
and other details. Note: Be careful
to fill out this form accurately
because the address you enter is
the one Google sends checks to if
your ads are successful.
4- Pay special attention to the Google Policy
section, at the bottom of the registration
form. You must select all these check boxes
to indicate that you agree with the policies
and will follow the rules. Google has had
problems with site hosts clicking the ads on
their own sites in an effort to generate
income, a practice Google now works hard to
prevent because it devalues the advertising.
When you're ready, click the Submit
Information button.
Frlir.ir^
>y Sense apphcanne rnusl [7 i do.ree maL | will nor click on the Google ads \m semncj Lhi outjli AuSense.
agiee lo adhere 1° JUSenae ffl , ^ ^ , ^ ^ ^ p^^pg^
■ ■ r ■ rn nn iriar Hi nhri ■
piogr-sm policies I'delaihj
_d"o_ n of a Kea djf_ h et\ a n ~app ^^/^ Sense jiccnuntTjCMEk^^^jr^QU_dQ3
iutini ii. r 1 1 u 1 1 r i u T i li 1 1
Which bad dfliEnbK y*u?
■■ I haw an t-mai jKHre-s-s- and pas. sword |GddoJ'< Acctunl) I akt-ady us* irth Goo^e sariicas- l(i>s AJpN'tidi, Gmail, Okul, or lha
ptisnnabiEd harrn page.
, , I do ret u:a Dwit ether sanric ts I Aauld Ika to c mala i new Gcagli- AeeduM
HlE4il4]nHi hlos 4a •ctyiHjr sotldlkg fiMglu Accaunl fni A4 Si »«- ?
V'ou can uee y □ u i a<ishnq Gec^Ib accnunl arnail addrBEE and paEEwnid mrAdSensa aswal. Qr juj can chncm- ne<j» nnc: jlkI lor
Ad Sanaa
f£ Td ike In use my Eliding GmglE aEEEunl I'm ftoGense.
O Td Ika to choose a now login name aid pBESwotd Just lor AdSanaa.
(Jib an Bxlctlrtf bn*qlo A.«»uii1
wmaawnitimiiT
UbB mjf Btiabng Gnnglo AeedutI as mjf
AdSansB lagn
Gcvyk- AfitCLjfrt
Email: \itiriitfo±qrtii iniily .tor
Pacciwort: *********
[ e Bach 1
:.3n:iiuc
rarni access you. accounP
5. On the verification page that's dis-
played, read the form carefully to
ensure that your information is
entered correctly. If you already have
an account with Google (for Gmail or
any other Google service), you can
either use that account with AdSense
or create a new login. Either way, com-
plete the form and click the Continue
button.
Chapter 14: Making Money with Your Site ^
Google AdSense
S*Mcri*J5cr» rfcfr
Iv- r.i i..u ii^TiJ "C-.vJr -I5'i-r .' j ii .i i. .. ^ ....n I.^r. I.. K n : n * ,J -.t T ll I.J ..n | n'|', r.,, i r r,.,l., !■[
h |l» ipijdliv pR-ii* Krtl tit Kl 4f 1 fll c-l^i.s H JM f >,N, |'|. iripr; |£. Ug qittlifeil j*i ll'SF, [>M iljOJ Iht pFj|l#l'
■ 'ill
urn.,
< m^-rit ju trim n»rwi
' Orttrte^Kii Dam
. • ,. js,.. .. |s
» Dnm Irrtc to )m iltiwlh ■--i-i-pl D rj',-:rj:
* HAiwjMrji io n w iipwit :
- CBw&yrii PHMiiiToo.1
6. If you filled out the form correctly, Google dis-
plays a confirmation page, even though you
can't get started right away. Google reserves
the right to accept or reject anyone who
applies for the AdSense program and, as the
confirmation page warns, it can take a day or
two for Google to review your site and notify
you of your acceptance. In the meantime, you
can find lots of helpful tips and tutorials for
finding out more about how to make the most
of Google AdSense.
7. After you receive e-mail confir-
mation from Google, you have
everything you need to log in
and create the code for adver-
tising on your site. Follow the
link in the e-mail message or
enter www.google.com/
adsense to go directly to the
login page.
Google AdSense
Engli sh (US]
Maximize revenue from your online content
Google AdSense is a free program thai enable xebsite publishers of all sizes to display relevant Google ads and earn.
Place arte on;
■■ ii Feeds
AdSense for content
Display largutud Gapgla ads
on your website's content
pages and earn from >^ld
clicks or impressions
AdSense glues you access
tn Google's vast nelwork of advertisers, so you
can shuw ads that arc suited tu your
audience's imeresls.
View all of Google s soluhons For publishers!
Sign up now
Sign In tu Google AdSense with your
Goii^fc Account
Email.
Password:
Sign in
C^acc^-voulrtEPunt
(B2UQ9 Google - Success Stories Help ■ Blog Forum - Terms
\t \\ SnDgh Aiinn - Oil Adi
Google AdSense
Pfapurt-:
AdSense Setup
Ghooaa the producl youB Ihslo add 1c your ads.
Dirphy adsihal s'r? is"*ge<ed to jtsircrta'a cardan! ar
audience.
*dS»rtt« forStmah khprevad!
Otar vaur uturc srlc* starch or 'Mb scirch whita
<amir>g ic-vhiue hum ad:- lEleranl la Iheii scaich
l4fm^.
PIbee refcrarrl ads nfeEds fount maraud lor you
m LaEd login: Jan 11 - lnnOit - mv
^ulGhurlD:pun^HH3ffifiHHraa2
BEBiEhAlScnsE Help
My Accaurrl
P*-:aurcBa
* J Till*
,'JtlHt
.1 ■
I BBBTEh | M Qngb
' ■ ■ ■
8. Click the AdSense Setup tab at
the top of the page and then
select the type of ad you want
to create. If you want to place
advertisements on your Web
site, the AdSense for Content
section is the best place to
start. Simply click the AdSense
for Content link to continue.
280 Part III: Going Web 2.0
p ages. For examp
Drop Books
the largest numb(
9* Choose the kinds of ads to display on your
>ages. For example, select Ad Unit and then
options: text ads, image ads,
of the two, which results in
gest number of advertising options for
your site. Alternatively, you can select a link
unit, which displays links to more general
topics (matched to the keywords on your
site) and displays for visitors a page of ads
related to that topic. After you make your
selection, click the Continue button at the
bottom of the screen.
Reports
ietAifc | Manage Ada |
m Elgin
m
My Account
I Channels
Resources
Gel Ads > AdSertse for Corrtorrt
AdSense for Content
Choo» Ad Type) > Choose Ad Formal and Colors > Choose Ad Channels ;» Save and Got Ad Cods
Google AdSense orooram policies allow you to place up 1o three ad units and 1hree link units on any page
Ad unit Text and image ads IdefauiD
Ad unit! both. The ads aie targeted
ind placement targeting.
( I n i ii :i
Ted ads only
rna<» ads only
Ad Title
Ad t«xt
■VH.ad-tirl.con
Link unit
Each link unt displays a list of topics that are relevant to your page When
users died a topic, they're brought 1o a page of related ads t
Bicycle pans
nir.r l il ir
Bitfile shops
Cyc ling news
Continue »
F o rm at
Ad units come in a vanety at sizes ■ view all the optians on our Ad Formale
m; =
. ,!■ 3D Leader! i ii t
726 t 90 Leaderboard
JEfl k ED Banner
23* KEDHaf Bannei
Colers
Vertical
ChooBefrorn one of our pre-designed color palettes, or create your ami
palette Ies_
1ED it EDO Wide Skyscraper
12D it 7JO Vlemcal Banner
* Sorne oplions apply 1o le^l ads only
Ad **xt
Sflasne
336 x 230 Large Rectangle
3D0 x 250 Medium Rectangle
250 x 250 Square
2D0 x 300 Sniai Square
160*190 filial Rectangle
125x125 Button
■ . .
urn. ff
10. Choose the size and colors of the
ads to display on your pages. Using
the Format drop-down list, choose
a size and shape that works best
with the design of your Web pages.
Note: You can repeat this process
again to create ads of different
sizes for different pages in your
site. For now, choose the one you
want to start with, such as the ver-
tical 120 x 600 skyscraper that I
selected in this example.
/ 7. Choose a color scheme from the drop-down
list next to the palettes, or create your own
color scheme by selecting the color check
boxes next to each of the ad elements,
such as Border, Title, and Background. You
can also specify the style — rounded or
square — of the corners of your ads. Finally,
choose the content you want to display if no
Google ads match the content of your Web
page. For example, you can choose to dis-
play public service ads for free if no paying
advertisers are available or simply fill the
space with a solid color. Click the Continue
button when you're done.
OlIOMftl" «»<f III [«S-ll»r">l !C*>'pMttt«. W MM fJU I
* Lifri cstiam *ui. to Iml wta atty
.m ii irr mbtn I
0 OOOOjj
Trifr t rrrr-f
&» 1 1 wouid f uia<
Tt«l « oooooo
URL «oaaaao
ipgnwtm.MgirM int-
ent*
AlSow ><* *• «*ir«fi uMff tr» *: i ctrt k><4 tut Mati|* w.tui * £1
Ci>^is r^ *nim Yai rimy mliad chin* « frm^rml tori and Mfi ij
the pwtKutar ad nit *
FuiiFotiIt Oil iuoiri tobtl t-l *
runisev usi luoiniiMiil |Uw acton detain
Chapter 14: Making Money with Your Site %S 1
12. On this screen, you have the option to
create channels, which can help you
track the effectiveness of advertising on
diffelent oarts of your site or across dif-
rJrl^C2 sites, if you manage more
trran one*?fte. You can create a channel
for a specific domain name or create a
custom channel to track the effective-
ness of an ad size or style that you use
across your sites. Channels are a unique
concept at Google, but they essentially
serve as categories for certain kinds of
advertising you want to track.
AriSi:nM! 1m Cnnlrnt
L Ad I -fri CtMii< M h juij Ail i.Uui > Ch*Hy Ad tjiihrti > i.H* iiiJLil <ULi.iH
Wind I JnaH-n;^
141 10 I'm iuiiam ctamAb ui iii-l ite parbntittA ui irii m um'l fin ibo Im ihA apifcki ii niM urj cvaan Ehoind nutaUa tt utaftiam id i j^i
L-^..*>-
Al c|tf rwv*ll ■
:J(..i
,TWlllWHV(f
SpuMtjr
FiflnmrlhirDinfl
E3
fFut+3™
My Account
tl5«n«e 5*i*p
GetAds I Mamas Ada I Color P»let1»5 I Qua
AdSense unit: 728x90. created 7/30/09
Y»ui A4Smk unit Iim been aav«il. Q»«itf w may •« s»u*«' toi »p »o 111 winulaa.
Vou rrwy pwtelriB code rto »r.» <.»h n»ipp at wehsrte Hut compiei wdh ou rnnqrafn odir»»-. For more help with implemerrlnq the AdSenne cod?, pirn: r r.»r oui
Codn Imnlffnert^im Gude
' Hp: Did vju t-roiv lhal rju c Ml make changes to jfoui ads without rttf icmq the si cads fi ycj tts? Tty I'j ....
Vow MSiim •nM COd»
jci ij 1 . yp« - *l« jtt .' j iviicc lpt '
[jo qq is md client " *'piAa-Q79093 Q2<6QCr7632 *
ft ?26xO07 crMtad ^/OO/OD »V
BDogli_>d_jlat - *5Cnfir3733Ql
BooqIs md width - *728r I
(jcoc-la md haiQbt - SO :
ft
<>ctipt t yp»« *taxt/jivuec ipt
■ xc«**Att p : t*j«»<^ . jt igluviii
- n p irji ■ zl ' jh: v iOj .
PfM.ifrw this &d5en$» unc I ECU in* AdSe'i^r urn I Cr**y * n»» Ad5»H*e ui'il
13. Finally, you see the Get Ad Code
page, where Google has generated
a snippet of code based on your
selections on the previous screens.
If you change your mind, you can
always go back and make adjust-
ments by clicking the Back button
at the bottom of the page. If you're
ready, simply click and drag to
select all code in the AdSense
code window, and then choose
EditOCopy to select the code so
that you can add it to your Web
pages. You find instructions for
inserting code into a Web page in
Chapter 6.
282 Part |||: Goin 9 Web 20
With Affiliate Programs
Affiliate programs are a special type of advertising program designed to
pay you a commission on any product or service that's sold if someone
clicks on an ad on your Web site. The tasks of signing up for affiliate
I programs and adding their respective code to your Web site work simi-
larly to Google AdSense, but the way you earn money with them is quite
different.
With AdSense, you earn a small commission every time someone clicks
an ad on your Web site. If you use affiliate ads, however, you're paid
only if someone clicks the ad and then buys something from the
advertiser — but you're usually paid much more if your ad leads to a
sale. For example, a Google ad might earn you a fraction of a cent when
someone clicks on it. But an affiliate link to Total Training (which pro-
duces video training programs) can earn you as much as 20 percent of
the sale price on purchased videos, and that amount can be $20 or
more per video.
Perhaps the most famous affiliate program is the one created by
Amazon. Like most programs of this type, including Google AdSense
(covered in the previous task), you must first fill out a registration form
and wait to be approved, and then generate on the Amazon site a snip-
pet of code that you can add to your own pages. Many companies run
affiliate programs themselves, like Amazon does, but other sites serve
as virtual matchmakers, making it easy to sign up with several affiliate
programs at once. The two largest affiliate networks sites are LinkShare
and Commission Junction, which take on the task of managing the rela-
tionship between advertisers and publishers.
For advertisers, the advantage of a site like LinkShare is that it handles
all the technical details of signing up publishers, delivering ads, and
tracking results. The advantage for publishers who want to add affiliate
ads to their Web pages is that you can sign up once with a site like
Commission Junction and then manage your relationship with many
advertisers from one place.
The following steps walk you through the process of signing up for the
Commission Junction affiliate program. (The LinkShare program is quite
similar, and many Web publishers sign up for both programs to access
their combined stable of advertisers.)
Dro
Signing Up
st u ft you
Need to Knou)
Toolbox:
An Internet connection
A Web browser, such as
Internet Explorer or
Firefox
A Web site where you
want to add affiliate
advertising
Time needed:
About half a day
Chapter 14: Making Money with Your Site 283
Drop Books
nection to the Inter
er with a con-
Internet, and enter
the address www.Commission
Junction.com. Click the Publishers
link to read more about the pro-
gram, and then follow the links to
the publisher's registration page.
— UminsK mi .. ;in AG ntal iiijiIh' qAffliiite Mutslirq. "ill in Ariuerltani ard finartfi Etiii AMnw* iHernil I <n :
^j^' _ , w @ ■ ■ : q.rai - 1 *J | Jt | l"W Tata*' Stoifift J°
, Fisuinc; fjfa CflmmlBlDnlindlfln-AanbilLiida InMTIIi.. & " Q ' i!3 ' frff^ Iatetf T TlcldT £^
t ti m t i & i i o n j u it 1 1 i a n
the place to affiliate.
CJU
2009
rW*Ew>!« UU4riKi ii.-ik
SITFSFinn
1.14
ca
» ■ SLIl- «
. 1 , l::ir I
lilcnTiia
reserve your spot.
WEBINAR
[ WHY SHUNNING i
IS BAD FOR
YOUR REVENUE
Ff GI5TEW Htm
COMMISSI ON JUNC1IDFJ. A VALUfc C LI fl£. IMC. COM PAN V.
1$ A ft OH A I I t-ADFK IN THf ON, INF AI1VI-H 1 1 SI Wli LHANNFIS
OF AFFILIATE MARKETING AND MANAGED SEARCH
We- d'r#E- qijUy ntsut).. rJjiw mpsror j.imvie« inddtvElpi lurnnable idairjudnpi
rar:4nmtBii ^i:l pjh ishir; ihniLqh pir ptrfcf naii:;^t»si*j t:J inure-.
© advertisers
rTUftJ.4Qnp'f most ptcdudiia natJiDrt. of put- Irtish-; Flurry g^:^ s iks bv
m p U r-r-t n h r> ip a . ?IJI .; ij ? pt-j C * J -|FAIi|^i r-r. »Ai -| h p r] punrji-am arihk + Tijlv
rriHiigad *rvd inbigulad. {ompuhmi iu* ■■*id - i tri-jin* mAihrtng icIijIIh-l
■ Luin man ibaLri qui imlii^* rnnt'«bng Kaliriiofi i.
■ L-faJuri mdH jhaut CJ iurd-i™. hj m a rijfcj « d d-»hi>:K foiiiBari
f* publishers
MixImizL jqui myuiui appn-tijribva by dLYLlaping juitumrjlH ivIiAMnahlpa vrth
fcrp-tiftr jdnilluK. Perform Hid g*t paid far 4 Li p, 1 c ill- arvd laid jau qiiwifci.
pGr qujJilyiH^ pi£Jlr.h*iL.. r-kl* yC" piA^iJim c-j d-rfc ft*^l l*.*l wfi~i :-ji ■ riduLbv
hlpiftiwwti EPmJputilKrurcr
k-iPinul I Fmtattd Mocta: On
i ■
f. Gfflrt i iiidn juili[E$*
SIGN -UP
PUB US Hi El: ftpPUjCATlLlru Swf. ■ ill 2
Plat ■■ XalHEt L
* rrvgliih
• ■ Ftuteori
■■ . ...
: :■ '
:>hd...
f uonltnal Cwrht nt y
Sihd..
■ . ...
■i i i i
SEK.Cvi.diir.Kron
lap ataniig
EUR C ' -r:-
i r- 1 1 1 1 a ■] ■ PraFaninE
lat- ill f ii m ti j I corfM-f. richi kuuhl aI
id -far j pprtc^dr arroupt
RtJtrj L Htrit» I
2. Select the language you prefer
and your country and currency,
and then click Next. (As of this
writing, Commission Junction
invites participants for most
countries in the world but sup-
ports currency only in U.S. dol-
lars, EU euros, British pounds,
Swedish krona, and Canadian dol-
lars. Check the Web site for spe-
cific instructions for currency
exchange based on your country,
as well as updates and additional
currency that the company plans
to support in the future.)
281} Part III: Going Web 2.0
3.
Review the service agreement. You
must scroll to the bottom of the
agreement and click the Accept
on in orcter to accept it. Fill in
»3ifcajf«l§^idicated with
asrerisl^ , *) . t^lmmission
Junction asks for a great deal of
information on this page, including
your Social Security number or
corporate EIN, and you must
answer all required questions if
you want to sign up for this affili-
ate program. Remember to click
the Accept Terms button at the
bottom of the page when you're
done.
ff hflpQjngrwpjq.DorWmtmfcui.ip. Mi xrttrxIgpupS Mi: iscksi : mi 3=ii_5 tcrtrStpU' . Ahidawn lirinirMl f xpkirui
iQf ',_ J 1 * !■ iTtlpj^ijnup^oinfiiiiiinr/pitllil-HrM^nurJJiy end- bb5Hoth»|n " A | *T | * | |tP rfltOft 1 f>
fa Firerrtid £ UtpE^dgnuri^.cDmi'mirnbir/pubKrdrs^iup.. £k ' 9 * 3 A " iaJletfT TIdIjt
~ T35TE3I
C
: : m t i i i i a n j u n t 1 \ ii fi
SIGNUP
FUBLIChEH Af Pl]C*T]0u Slip 2nF £
^mmiumn )u>r1iofi pravid-ii p*jjaluhf n 1hi Dpparlunfch 1d .*m mor. r.rarvj. tram
Qhsir BudpncB nn n pHF-for-pH-fcymannr basis , Riblrri-m con partnnr urth thousand*
■ir *J , tiTjL-i-iL- lirtint, plaot- act and hnks on mti' neb ii a*changt lar
oonvniiHni. iridrTiinigi ml -aHhui ptrb-rf nhipi anhri. Hfch * iin^-i W-ib-b.nd
mirrf«n Pitwt nomnif t«- ti* f oinmig itt-ts to aDDif tojn" th* CcnTM-nin
JuriLDun nHiY^t.
"+" dsriort'r required rieldi.
Semite 4flr*f r»er*
Please ensura tftustnl trmunh and readtha antra Puhishsr Servica rigrat-mmt
In iht Hhddw below and clck 'Accept In nrdtrtL antiee bi thecerww ul the
A/gr.irninft ti-rd CDrfthu. whh lh. .pplic.b'Dn.
Ccnr-ntfif fcw JurKfwrt Prlfiftiter Sendee rfipnewwt*
E
SITF SF1P RK
"Thii ftiblriher iiTvlL-y aot tarn arc ("Agmmenr} r: midi- bj And agreed
10 bttwwn Cc*™™:-!.i(in Jundion, |nc-, a C*!*"^* GOTOretlQn, hjcabjd
at 530 Eart Norrtacito Btra «t.. Santa Barbara, CA US* <'CJ), and
l'j>j i" -. ■ . . hr, CJ fKlCAIAf
Eiv checking ihis bL-.- I rtdicaie [ hate read, undc-rtiand. acknowledge and
ociph lliH CammmiDn JividtMn Pubhih-ir 5-irvKi A^rnmanh, *rtd I ftgrHi Id hm
Q B hlmnul|Finkttttd HQdrrOi
r f m "i v s i i] ii j lj rv r I or
If yau are into AFFILIATE MARKETING,
Vnu won't want tn miss CJU 1
M mu llW Piitlisur*
its
« JU *«M IV.
4- When you click the Submit
Information button, Commission
Junction displays a confirmation
page and automatically sends you
an e-mail with instructions for com-
pleting the registration process,
filling out a W-9 tax-information
form, and logging in to the site
with your new username and pass-
word. Enter www.cj.com into your
Web browser, and use the login
and password information from
the e-mail to sign in to the site.
commission junction
5. The CJ Account Manager features a
series of tabs across the top of the
page, where you can make changes
to your account information, run
reports to track the success of
ad campaigns, and use the
Commission Junction integrated
e-mail system. Click the Get Links
tab to start creating the code to
add to your Web pages.
Publisher Home
Messages
Announcement
Exclusively for CJ Publishers
Commission Junction and NETExponent are co-sponsoring a new 2009
AffiliateBenchmarks research study. All you have to do is take the short survey,
and you'll get the results for free (a $200 value).
Take the survey now!
reserve your spot,
register today!
W
9.15.2009 - 9.17.2009 • santa barbara • California
Chapter 14: Making Money with Your Site 283
6. On the Get Links page, you find a
seemingly overwhelming number
of options, but your first step is
entiallv t J choose the advertis-
foj ^WTC> Qrk with. A good
r Tu srart is roHfrowse the cate-
gories of advertisers to get a sense
of the available options. Look for
advertisers that sell products or
services that are most likely to
appeal to the people who visit
your Web site.
^ftcoamUslon Junction
I fimnki
General Categories MuertserLisI Smi
Gi«.r*» Mkertisar List
CJJCnne ' Cartatt ub I nt&
5e»rcli AiN*»ii^«.is
Laatfuaqe and Taiqetcd Area Fltitr L S / OFF
v A*Jtiori8l S*src*i Options vAddicnal Flier Opiione
Fnd
OtaatayoV *■
AArertmor CatorjDltaa
Now AaVartMors
Accaaaarioa
DopanmorM Sioro».M»lbi
1— im
Supor&u
Handbag* - Jen«liy - Shoes
Dapartir'Hri StCret ■ Virtual Malfc
Commercial- Person Insurance
A2Ho6lnj
HSBC Wfcnoie
Art -ptM)4n Husk
Ed)lK4ltO»
Legal
CJM Eweiing* family
All - MnM - PliCIO
CM4ren-Coll*i»-Lingji - -
S«Mi -■
FranKlnCmy
commission junction
Get Links
General Categories Advertiser List SmartZone Settings By Relationship
Get Links - Advertiser List
Search Advertisers »
Find
« Additional Search Options
» Additional Filter Options
Promotion
.anguage
All
Czech
A
Link Type
Danish
Dutch
= J
Select...
English
Category
Finnish
Online Services > Domain Registrations
Advertiser's Targeted Area
Size
Select...
Relationship Status
I Select...
UNITED ARAB EMIRATES
UNITED KINGDOM
L=D
w
UNITED STATES
^^aal
UNITED STATES MINOR OUTLYING ISLANDS
URUGUAY
t
w
i Close
7- To narrow the list of advertisers,
you can search for company names,
products, or other keywords. Click
the Additional Search Options link
(shown in the figure for the preced-
ing step) at the top of the Get Links
page to reveal more search criteria.
You can then search by language,
product, and other criteria. Limiting
the list to just the advertisers in
your primary language and in the
geographic area you serve is a good
start. In this example, I selected
companies in the Domain
Registrations category.
8. As you drill down through the list of poten-
tial advertisers and start to make your selec-
tions, consider the commissions they offer
and their overall performance in the net-
work, all of which are listed for each
advertiser.
Immfwf, mi TimM 1 Am nhw C«
Wwm S««ld> fin Mb
*oi(wl 13 Mr«l.
B Awatorninn SitaclMI
ZXUth
uetam
Sae i nrir
ami
cpt. umi
tFt Iffl
Lot UIJi
•
IXWtBHOSTING
»W<JI
M2I
3l* WC 1 > T rr UBD
MM
it»li|iSiwi
l<-.V.t- L.lt.; • .u» -r..
aplus.net
til *
Stb IiXiUj miUIUbl)
He,
A(*j«r*i tttfwbrtt
1 bitvcr fl^Y ■
lHOt
t&4 34
Stk i ijj: ticoco'.'X
NNMWMMMiaM
Ha
Mha
a ItnlifSiftin
E«*r ca H«r»i| »v«w u*-)
fU.IT
B>» I ' ' • -'.<SC>,
ts.t*
If you're looking for a specific company, you can enter the name into the Search field at the top of the Get Links
page at any time. If the company you're looking for isn't available, Commission Junction provides you with a list
of similar companies.
286 Part III: Going Web 2.0
1A' nli:n:l W:t lim-c. <rc i: ,ir h.1 'A-.w.y. y.r.-.W
'J?,™*^ 1 Si inlarnsl Wub Hosli ng
Dro
and Domain Narnu Skills
: inz I: V i^kp^'landl com
' i m i i
JlMiiM HumhI: 9-S4|i-2DD4
Ci4n5#p/: Wrb HuGling'Sf Tra (shr/w rimibr adroriirara)
Dhu^iNhi! Uiiii GJ Pubiahar,
IhJi*'. foi Luirti Jil Ihy 1&1 hiluliiyi Aft I id I hi H I < j |j i u m i
l&l if Chi- liryi-jl Hflfe li«l it IhM rtiWH. which ihOwi in
tha succg :s Dl mr afflialct and nfnir sfilbta program.
Earn up Id IHOpbi-eiIb
t*OMB rcJun T4<4 H*agB£ Hniini] i%
LowmEradl mid
E:<prrnnctd acmuBl nMn*gm:
JMioa » ess j-ineei products
Vnu nrt si Ihj^. jtJ monf as a 1&1 jffJuJe 1 VAirr. jruinn
1bVl you h#h gatflna war 15 yra Industrr aapBrtstcB and a
qlcfrii cumnmiiljf Morn 7 Blllitn paDfJa. I -LI enmbmas
aawica M craala an unrnatchBd ■rIub.
Uh lo 5 FFSDamaha
oat L*tka
By Typa
By Pn>rvirtron
PlD*JCi
Ai&«[t Ft&juijS
Coupons
AdvancBd Unk
SwErps takes
Hoi Product
Tut Link
9 alalia curd
Cnrtirt Link
Fnw Shipping
5BiiOiBl Link
AdwrinBi Smarilun?
• • ■ ' I'
■ 1 1-
RK4l"tf
Email
Updatt MalSrtrngs
NDt EC TUB BBfeCllDfi partSiBB UTiS 1B 1MB BdrerilBOr
and bQ hraaaaBoa aant uahg Cnmmlaalcri Junctlnn
Mcrrbar MHsaomg lachralcgy Via*' jT.'jr njnbal
mail selling r
& Click the name of any advertiser to display
a Details page with a description of the
company, program highlights, and links to
advertising options. Click any of the
options in the Get Links box, in the upper-
right corner, to generate the code you need
in order to add the advertiser to your Web
site. In this example, I chose the Banner ad
option for landl.com.
10. Most advertisers offer a collection of ad sizes
and designs, and you can choose which ones
you want to place on your pages. When you
find one you like, simply click it to continue.
IM
■■MMiMiinlinMiini
ffemiti t 3£ it 33
[B~ r«rtcnr.Ac»n
LA
1*1
Mm
Special
BMDMm :
1*1
Summw
J*
m«In «t)nwi
'"« -
inraiv
I0J—
IJT«0V»»
/Ml to.
Cui.
«;.-:.(/ r.io-..'
S*W>>*oif1
HrtPWduO
Domains
l,l*.||' t :
4BB«GDSiMn
IQ3bfc£<»:
mail
M-V HQ
SlM Lul tMi
CM Lr*-;
KB U
(IC1VJ
WD
c«
■3d
:>< G5H 130000
'JSC
0(1
Oil HTM.
W33C
MS.1]
3d> U 93 ■ 1300 00
USD
"mi i ■ 1 iitn
Oil
On KIM.
P2«:
S*^ C93 130000
USD
on
f>«1HTM
MA
S«» U W BOO 00
USD
on
on HIM
tan
129 J'
Sdlk U S3 ■ 130000
.JSC
Oil
jollity
Oil HTM.
^ UnK Daull . Wlnfcrts mtwei E
1 1 httpsv)TiiribiK.diiinuTiAniBEi;pi
it- mi-™ , , ■■,
I lulled by Dvir T
UnkBDatua
Pramnlicnil Dalts
LinklDJNamri
UnK TypB/HSa
□aair-jtiDn
Link DnniarraliDn
□aslhadon
3 iWmltl EPC
J Day EPC
: ..i
■ i ■
Unit LdhL|u»jy
HElrinnsNp Status
j^Jwin A*r«rtsai - MNnMm klBintl Eiplwtr
I
J
I-
^ro>jnl]ilb^l^(r^nftlHtfQn^j()c4np*c^3n^dDrK4KC ^
.In i- ni^nscr
1A1 Mpnrl .cw Tu join Ihis adwriircr program juu muct appro*?
a [i in e Ibitvib ind BandtjunBln addDanialhB DommJaBlon Jundlnn
puMi:t>ir iflnm- ijrgomt rJ- To larnilttt- 1ht- 1dm-i. p^uin- micw 1t»
nprriil [httie md cunnrtiDnc ?nd prarr 1hn accHpl bittun *1hn brttn
ot 1hosa tama.
v T aB, I haw raad and sccBptBd the 1*1 IniBmat
CotilmuB ^|
■JjwCOJinr nWHAOER
'-HT,mt* tiiljji-i'jl'j CarwiciEU Jindn-ihc JUInpUi
I svU(,it;i* 30-ji(.;«H2i ;<fot
i iniAineiiPiniBLiBUHB* Oi
7 7. if you've never worked with the advertiser,
you need to join its program before you can
add its ads to your site. Some advertisers
require a manual approval process that can
take a few days; others accept you into the
program right away.
Attn*
Drop Program
- i - ■;■
Get HTML
Ail 1o SmartZona
a die
HAinet i fiof neo "B# ■>
Chapter 14: Making Money with Your Site
12. After you're accepted into the program, the
bottom of the Details page changes to offer
options about how you can obtain the code
you needlto add to your own site. Choose
ii\feC CSit to add the advertiser by
ftgan
and pasting HTML code into
your Web page.
Link Larguags
I.- "I I - ■ ; : - J -.
I&1 Inemei Web Hosling and Don-ran Name Ssles
Online Services > Web Hnsl rig/Scrveis
English
■ ■. ■ ■ ■■
OetKTHL
( Id e
Hide tracking code in link? □Yes
SID
Image URL
Destination URL
|http://www. advertiserserver. com/advertiserimage. gif
|http://www. 1 andl . com/?ac=OM. US. US469M02463T21 03a
Update Link Code
Code
<a href^"http://www. dpbolvw.net/click-1869587-10505076" target="_top">
< im g s rc= " htt p : //www. t q I k g . c o m/i m a g e- 1 869537- 1 0505076 " wi dt h= " 1 50
heiqht="40" alt="Over 7 Million Customers!" border="0"/></a>P
Highlight Code / Copy Code
Close
13. When you're ready, simply click the
Highlight Code button to select all
code in the code window and then
choose EditOCopy to copy the code
so that you can add it to your Web
pages. Then open the Web page you
want to add this code to in a pro-
gram such as Adobe Dreamweaver.
You can add the same code to as
many individual pages in your site
as you want, and you can add
the code to a template page in
Dreamweaver to update numerous
pages simultaneously. (For instruc-
tions, see the task "Inserting Code
into a Web Page in Dreamweaver,"
in Chapter 6.)
Finding affiliate programs
This list describes a few of the more popu-
lar affiliate programs you can add to your
Web site:
Commission Junction: Featured in the
task in this chapter, Commission
Junction (www. commission junction,
com) is one of the most popular affiliate
networks on the Web.
LinkShare: Similar to Commission
Junction, LinkShare (www. linkshare .
com) is a network of affiliate advertisers
and makes it easy to work with many
affiliates at once.
W Chitika: Specializing in blogs, this site, at
www.chitika.com, offers publishers a
service that' s part Google AdSense and
part affiliate program, by offering ads
that pay for clicks and sales.
v 0 Amazon: One of the oldest and best
known affiliate programs on the Internet,
Amazon (www.amazon.com) makes it
easy to sell books, computers, and any
other products available on the site with
links that direct your visitors to the exact
product page at Amazon.com.
Check out these popular affiliate programs
online, and don't forget to search the Web
for affiliate sites.
288 Part III: Going Web 2.0
Adding a PayPal Button
st u ft you
Need to Knou)
Toolbox:
An Internet connection
A Web browser, such as
Internet Explorer or
Firefox
A Web site where you
want to add a PayPal
purchase button
A Web page editing pro-
gram, such as Adobe
Dreamweaver
Time needed:
About half a day
You can sell products and services online in many ways. At the simple
end of the spectrum, you can set up an account at PayPal.com and start
selling products or services in a matter of minutes, with minimal effort
and no upfront investment.
Moving up the scale in complexity and price, you can create a shopping
system at any of the dozens of e-commerce sites that offer more com-
plex shopping cart systems.
I recommend, as a general rule, that you start simple and add more
complex and expensive e-commerce options as you start making more
money. If you're determined to add a full-featured shopping cart right
away, the book Web Stores Do-It-Yourself For Dummies, by Joel Elad
(Wiley), gives you detailed instructions for using some of the most pop-
ular online shopping systems. If you want to get started with PayPal
right away, follow these steps:
7. Open a Web browser with a
connection to the Internet, and
enter the address www.PayPal.
com. Click the Products &
Services tab at the top of the
window to see a detailed expla-
nation of the many kinds of
payment services offered by
PayPal.
PayPal
haw rwdtraidaT
Wh?J ran I flO"*Ttl
ParfalT
- Is P-wPjI free to use?
* Laamhaw PayPal wrarfcs
1 Shan wthput ggMsinqwuj nrannal
Intormahon
■ Send money ki friends and tomlk ainund
I hi- vttirld
> fltcBPt nawnanls mi vaur tBit Inline
' SUrt arrenlnn nedi raids on km
h-Mhatd.
j StmiUKJSmi Id acl pad nntnt
Chapter 14: Making Money with Your Site
2.
On the Products & Services page,
you find links to the many kinds of
payment services offered by
ivPal. Cli|k the link for any of
asii^ideltfcA^n up, watch a
emo, afra fimrTfut pricing infor-
mation, including fees and com-
missions. Click Website Payments
Standard if you want the simplest
options for using single Buy Now
buttons or PayPal's simple cart to
sell multiple products, services,
tickets, and so on.
PayPal
Way* :o d jy
Send Money
matanuy to anyone It » umplt and teem. O
3hop oniric
Speed t-foujrichtewiul at mousandt afweesnas
B|Ml Hons*
ReBJr a tiend.COnMjlJ»hj adnjtlpoj*. andrnnre
PaunneEtaa-
Make a»iuia pure hosa* on »B»t
PauPtt Plus MasterCard
Pay no annual lee and earn rewrds pnnl:
PauPa DahrCard
■M\ Mltl »0fn Will fat P«l *<XCUlt
Wau<; to g*» o:id
Buy A/owv
VISA
Website Payments Standard
At&tflt crvdM cams on your webeNe. L
tttt«H8£WllHI&ail
3lat acflv.j pat wdrcq'
J
andaasty
C-e* a merchant accoirt and gateway »H in one
Crtrg r»raicES
Imxice cutting t ttuough amal and gat paid fail
E.tcra Ctitctoul
Lift sales by addng PayPal Idwut rebate.
eflWPiymanB
R«.s<* payments BjjCithdOtftui *e*ri*1iig&
Bond Money PKiiaat Money
ml I I' I *sf 11 If l t
a bay Developers Nanpratts
1 NerfrnnlJ-er^ce!
M it .l.il ;
• 7acr«iliaiO«*M*«>
• Featia eUal
• FAQs
' Wabila Pavrfienli Pro
'Payftcw Gateway
' Bairejs Checkout
• intomjtnnai &alus
• vlrual Tanrinal
twM* WaUsda Pa y a i a a l*
StMthVii
- C empire website
P jf triiris Standard and
Pro
- Datasheet (POFl
website Payments
Shndard rrtepjatltfi
Website Payments Standard: Ovurview
Turn your wabeata mo an »r»lin» Mora today
/ow sie i» up. but howan? tu«K»r«n p&ngiop.. • 1 ■ -i : le Payments Standard is oui w- •
w*yh) S«f up Ort|reos^ntonWurw^iB»rrjau«Ml • ■! -■ t; > bnt4ri]8.bsrilt»n6ter&*iij
PayPal 4 jaa oema
Catling iurt*d 11 aaay
&«*oiettielabslietowto see wtiatworta best roiyoui business.
1 w «m iiunatB. rimii-piry, lam Cifiiaminta^iatlon Pi>;i «j
C c Jt« Fayrrcn: El— ons 'or yo jr wco site
You dont neea trrjrTsrwng sum. anyone tsn oj i. '><eit9tiY
S«i*lnp> <him
Hut *u»
acalr arte now
»Hl IIIIlT (II- TH US Wl- IhHl H.J.HCI /II
Create arc new
I III I 1 I r --1-rlK
111 nun r 1 11 !!»• mm: 1
CrojtannBnaw
Ciajlennenmn
3- The Website Payments Standard page
provides an overview of the options, a
demo video, and other information
about how you can use PayPal to sell
one or more items. Click the Sign Up
Now link to continue.
4- If you already have a PayPal
account (even if you used it only
to purchase items in the past), you
can log in with your existing
account information and continue
with the setup process to upgrade
PayPal so that you can use its
sales services. If you're new to
PayPal, click the Sign Up button to
continue.
PayPal
Gelling Started with PayPal Solutions
Hawtoj PayPal?
tf you dnnl havs a PayPal arcoui. jute-d lite county nr mown
wtiara foi ha In talDW Id begat croanYgf our Bualnaaa
a«Dirt
Sat ad t* ctnariry at it^aa water a yem Eke in
UntKt Salts
31 ;
ai'jt Tiani ae>on Q
Already using PayPilT
Log n ham Id u:a ha al in-nne pawT»nl tolutnn Hynj attady
tuva a Paracnal or Prarnlar aEcount, wjtfll ha aahadlp upgrade
>] B 9UEinBE:E: 3BDUTIL
■Nttt uprnsde? Gel mpie i>yie
Ett*S# WTHK JsrirK^dfllSttStniry COrrt
0.fl. namaBctimalrKarci
PayPal Pa« mot4\
LDP t l
FniBDlypur amaiP
Fftrim Qji MHE-EVOtf
duj | ri I jjh I i*«-[hrt ;™i wbinwita atir<iiiM± h|
R-ivcy Bog Btlimb Lii^ j^himtIi Srtt Mip <H»y
CnpyiHrt ff 13E8-2HH PayPfll ^Irafls ranr«d
200 Part III: Going Web 2.0
ou can read about your options and the
steps involved on the Getting Started page,
but all you need to do is click the Go button
in the Sign Up Now area to continue.
PayPal
Sign up for a Business Account - Getting Stalled
i ■■■■■ i w» «Ok H m*t accaUhe whr wdti fajfai
4^-. i iiiiLrL
"■■ ! I- J"°C U"
ififcntlUian
Stop
Infa RcDjalreJ
Time
Sinus
1 Sljii 4|>f« a
BtdLwJltCIHlHl.
i ^KDifitTJuanaaB nwnefte name, hHibs, and
amail
* Eojinoii nans- and iiJri-:-:
■MO minuts-
' euBinm&reer4» IrrtannalDn
L'JIii ir AMjf/fHl "i iiiiHiiH-rn i-l i| If-r n yl-i Ki-i-tr 1 '
» H Id aGiapl cmdi tarda, bankbanafpra, and PayM balances
* Suva nn*»v and -sail rrrafwrtVi aur marnhaTt : rduhcrr:
2 Va*** r <"<r IpfOllttaSO*.
Cflmmnamsll
addicrr
i TUB email ediessiuu uaad 1o b^j-'i up
2 minutes
Add did luiiIi m bar* i Bankruma
Business At: fount Selup
•RbcMphI
fi.^i-«i, inTomnt cr
::I.MII!!M-N:nil!
,\;cruss Ire 2:
- Choose a
CBlBDDrj- r
iflWWiH-: nwfut, M11U11&. _ Chnrra a toUa -
□ OthBr Martoa tp lac b
Own VJtebsrts-
hflpitf
Fbasa di-acribt vdur buirri-:-: bakw
Seme fianiflcum
■TfftfkPhnno:
ad.
'<=*°0"!P ■■ Choosee
CBlBBBiy- r
[alagbPji-
r«t*Tr«iHC*inPiica: - Choose a YBlue- t
Froudng us *1h hs
nfamTauon abdutjraur
bustiE33 hdpa ensure Ihc
bbeuKV oTsaur BDCDiit and
alows us la serYtynui
buiii4n ri«<h by rt4 1
PIhhsp make njn dial Ihe
Ufa rm all d n wiu pmvidd la
BtajrJa. Learn triors
m* Thla IrtarraHlBnrtllnat
be =hansd wttiyEur
[UatMlBIB.
6. Fill in the forms carefully and completely.
PayPal uses this information to process pay-
ments and to verify your identity when you
use its service. When you finish with the
online registration process and enter all your
bank information, the Get Started page is dis-
played, where you can verify your
information.
Because PayPal is a prime target for fraudulent activity and identity theft, it provides many levels of verification
and mechanisms to confirm your information, from your e-mail address to your bank account. Taking a little
extra time to verify all your information can help protect you and your accounts.
Chapter 14: Making Money with Your Site
1 Bkgn up for a Butlmtti Account .
Cornp4uto
2 Vanty your Information
fttn*
Info Haqairva!
Tim* to tomeleta
iUtioa
^ tanlkrra email
(rc^u tared)
The amal jddmi* v°u uitd to <qn up
2 minutst
Confrrn vour bant
mjuntK
Onlrw bank rig tccnt
Z-J mnUtM
Wti» >h*uld I verify my intoanaattoat
• Cat yoLr mnnay faster: Tramfar 4und. From PafPal diractif ta yaur bank account
Note: -rem can proceed to ttw other steps mrtinq for jour borti spcoum confrmsiion
3 Set up your poymenl volution
Implement Wetute
Pajments Standard
find a ritM tolutlDTi I ;
Info neqaire*
flan* to Complete
nrt n-,
| ' nrnt. t<rr, Qude IPDFl
7. To confirm your e-mail address, click the Go
button. PayPal sends an e-mail message to
the address you entered when you com-
pleted the registration form. Open the link in
that message in a Web browser and enter
your password when prompted to complete
the e-mail verification process.
1 Sign up for a Business Account.
Complete
I 2 Verify your information
step
Info Required
Time to Complete Action
Email confirmation
Complete
Confirm your bank
instantly
Online
banking access
2-3 minutes
Why should I verify my information?
» Get your money faster: Transfer funds from PayPal directly to your bank account
Note: You can proceed to the other steps while waiting for your bank account confirmation.
9* To ensure that you're who you say you are
and that you have access to the bank
account you entered when you registered,
PayPal makes two small deposits into your
account — maybe as little as a few cents.
The goal isn't for you to make a lot of money
but to ensure that you can prove that the
account is yours by entering the exact
amount of the deposits into the bank confir-
mation form on PayPal. Your bank will likely
take a few days to record the deposits, so
you'll have to wait to find out the amounts
and confirm your account. In the meantime,
you can continue to set up your account and
even begin using the PayPal services, but
PayPal won't deposit any money you've
earned from sales until you confirm your
account by telling PayPal the exact amount
that was deposited.
8. When you complete the registra-
tion process, and whenever you log
in to PayPal, you should see the My
Account Overview page, where you
find links to the many features
offered by PayPal. Next, you should
complete the bank verification pro-
cess, which you can do by scrolling
down the page and clicking the Go
button, next to Confirm Your Bank
Instantly.
Complete Bank C onf i r m a tion for Your Security
PayPal made two Email deposits to your bank account. Nov that ynu^e IcrjtearJ up these deposits, please enter
thsio deposit amounte aHnctiy na they appear nn yow bank statement. This process ensures that you an? the
owner of I his account.
rj«ib Acctuqt
Defi*
arc* iotceo Deposits; Pending |*
alt AaVi»U*tt: ^ n |
USD [4hd dgfo)
U9D [tad d^its)
a [iLBjualfbakai 3-E buiinaia
dnMrln appd-iron your bank
irjiymant.
+ Chad- Hrih faur baric and orni
beak lattr. ~
Once vou cnirplete this process, you can maka instant PayPal payments funded with your bank.
IT you ana unaHe to check your bank statement and nnd tha deposit amounts, you can:
a Confirm your bank accnunt u-iinq your ariina bank account infermatmn
Submit
10. Click the Merchant Services tab at the top of the screen whenever you're logged
in to your account, to set up or edit any of your payment systems for your Web
sites. The simplest payment system uses the Buy Now button. To create one for
your site, click the Buy Now Button link near the upper-left corner of the page.
292 Part III: Going Web 2.0
Drop
/ 7. Fill in the Create Buy Now Button form with
information about the product or service
B|wa»ttl^efcind the amount you want to
irVg^^lect the size and style of
button you want. (This is how the button will
appear on your Web page.) Then choose
your shipping and sales tax options. You
also have Button encryption options: Select
the Yes radio button to enable encryption if
you want to create a button that's more
secure. (Note: It cannot be edited again after
you create it. Of course, you can always go
back and create a new button if you want to
make changes.) Select the No radio button if
you want to be able to modify the code after
it's added to your page. (Note: Choose this
advanced option only if you know how to
edit the code yourself.)
Create Buy Now button
Item details
item name/service: Don't Waste Your Money on the Web
Item ID/number:
(optional)
Price:
Currency:
ebook101
20
U.S. Dollars
You can change the default checkout language and content for your buyer by selecting from the
countries below. Otherwise, do nothing and your buyers can choose for themselves.
Buyer's default
country:
Weight: (Optional)
United States
Lbs 0| H
Choose button style
Buy Now 107x26
Pay Now
107x26
Buy Now
122x47
Buy Now 86x21
Pay Now
' 122x47
© i Pay Now 86x21
Need more choices?
Use your own button image
Button encryption
• Yes Your i tem price and other details are encrypted and cannot be altered.
Note: Selecting encryption means you cannot use option fields or create email links.
□ fj 0 Non-encrypted buttons allow you to directly modify your HTML code, create
option fields , and generate email links.
Add a Buy Now button to your website
Copy your custom HTML code
Click the Select All button to highlight the code within the box and then copy it.
Note: An email link will not be generated if you are using button encryption. To turn encryption off,
return to the previous page and click the No button under Button encryption.
Encrypted HTML code for Websites:
(Copy and paste this HTML code onto your website)
<form action="https : //www. paypal . com/cgi-bin/webscr " method="post">
<input type= "hidden" name="ctnd" value=" s-xclick">
< input type=" image"
src="https : //www. paypal . com/en_US/ i/btn/btn_buynow_SM. gif " border="0"
name= "submit" alt="Make payments with PayPal - it's fast, free and
secure ! ">
<img alt="" border="0"
src="https : //www. paypal . com/ en US/ i/scr/pixel . gif " width="l
Select All
Paste the HTML code onto your website or into your email
Use an HTML editor to open up the webpage where you'd like the payment button to
appear. Paste the button code you just copied into the appropriate line. Now preview
your webpage; you should see the payment button next to the item you want to sell.
Some HTML editors may add, delete, or change characters in your code. Make sure that
the button code pasted into your webpage is identical to the code above.
12. Click the Create Button Now button at the
bottom of the form. Then click the Select All
button at the bottom of the page to select
the code that PayPal generated and choose
EditOCopy to copy the code. Next, you need
to open the Web page to which you want to
add this code in a program such as Adobe
Dreamweaver. (For instructions, see the task
"Inserting Code into a Web Page in
Dreamweaver," in Chapter 6.)
Online services, such as PayPal and Google, that handle money are especially vulnerable to unscrupulous spam-
mers and fraud. If you receive e-mails from these services, check them carefully and make sure the domain of
the sender and any links you click really are from PayPal or Google.
Chapter 14: Making Money with Your Site ^ ^} 3
Adding a shopping cart to your site
Drop I Soaks
yPal offers a quick and easy
selling products and services
on the Web, you might find many other
options superior, especially if you want to
sell many products or services on your Web
site. Here are a few of the most popular
e-commerce options on the Web:
is Yahoo! Merchant Solutions (store.
yahoo.com) offers a full line of
e-commerce services, including a multi-
faceted shopping cart. One of the most
popular services on the Internet, Yahoo! is
competitively priced, highly customiz-
able, and takes care of every aspect of the
shopping cart and transaction services.
Google Checkout for Merchants
(ht tps : / / checkout .google . com/
sell) requires no sign up fee, is quick
and easy to set up, and provides buy
buttons as well as a simple shopping
cart, similar to the one provided by
PayPal, which is covered in the final task
in this chapter.
\^ ProStores (www.prostores.com) is an
eBay company that offers an all-in-one
shopping system and an enterprise-
level ecommerce solution that includes
supply chain and vendor management
tools.
V 1&1 Internet (www.landl.com) claims
to be the largest domain registrar in the
world. This site also provides Web host-
ing, e-commerce, and a shopping cart
system.
PayLoadz (www.payloadz.com), is spe-
cially designed to sell e-books, software,
and other digital products, as well as
fee-based services, such as subscrip-
tions and memberships.
For more detailed instructions on working
with these shopping carts, read the book
Web Stores Do-lt-Yourself For Dummies,
by Joel Elad (Wiley).
291} Part III: Going Web 2.0
DropBooks
DropBooks
Part IV
The Part of Tens
The 5 th Wav e
HKeyou asKad. But
personally, I thinK it
}ias to) many spinning
spirals and Hinting
ifehte. It nates... W.
looX-at-lose-all-
con.-cen-tr^-tioji...
By Rich Tennant
DropBooks
Chapter 15
DropBotftoCool Services for Your Site
In This Chapter
Developing e-mail newsletters
Finding inexpensive professional images
Using pop-up previews
^ Identifying fonts in graphics
Creating surveys for your visitors
Adding a favicon to the address bar
Hiding your e-mail address from spammers
^ Tracking Web visitors
Setting up a teleconference
The best Web sites include a broad range of features, from attractive graph-
ics to interactive surveys to detailed reports about site visitors. However,
many of the most advanced features are highly complex to create and maintain.
Fortunately, a growing list of Web services allows you to easily add specialized
options to your Web site, without having to spend a lot of time or money. In this
chapter, I introduce you to some of my favorite online resources — sites that can
help you take your site beyond the basics without breaking the bank.
Most Web-based services like these make it easy to set up an account and then gener-
ate a snippet of HTML code that you can add to your own Web site. You find instruc-
tions for adding code snippets to your pages using Dreamweaver in Chapter 13.
Measuring Traffic from Web Visitors
Don't settle for the lame statistics you get from most Web servers. You need to
know who is visiting your site. Add your own stat counter and you'll get far more
details about where visitors come from and even what they search for in Google to
find you. Although most service providers include basic Web traffic reports as part
of their hosting services, you're likely to get far better results from a service like
Google Analytics or StatCounter.com.
Google Analytics is one of the best traffic counters on the Web, and one of the most
popular — and it's free! You just add a little snippet of code to your Web pages, and
Google tracks your visitors, creating a comprehensive report full of juicy details.
2{f8 Part IV: The Part of Tens
You'll not only get the numbers of visitors and where they came from, you can even
see what people search for on Google before they visit your site.
To sign up, just visit www. google . com/analytics and follow the instructions to
T\eLf s^tccount for your site and generate the code you'll need to add to your
s>*en it's as easy as copy and paste to get your site set up. If you use a tem-
plate to create your pages, you can simply paste the Google Analytics code snipped
into the bottom of your template and it will automatically be added to all your
pages.
Creating and Managing E-mait Newsletters
One of the best ways to keep people coming back to your Web site is to remind
them of what you have to offer, and one of the best ways to do that is to create an
e-mail newsletter.
Managing e-mail newsletters is a complex process. Creating a page design that
works well in lots of different e-mail programs is hard enough, but did you know
about all the legal requirements regarding what you can and can't do when you
send an e-mail letter to a mailing list?
Among other things, you're legally required to make it easy for people to stop get-
ting your e-mail if they don't want to subscribe. If you've ever used the unsubscribe
link at the bottom of an e-mail message you received, you probably understand why
it's important to make it easy for people to get off your mailing list, as well as sign
up in the first place. See the nearby sidebar for more about legal requirements.
If you have more than a few people on your mailing list or you want to send mes-
sages on a regular basis, you'll be best served by signing up with an e-mail newslet-
ter service. You can read all about such services in E-Mail Marketing For Dummies
by John Arnold (published by Wiley).
Here are a few of the most popular ones:
Constant Contact: Considered the most popular online newsletter service,
Constant Contact has been in business since 1996. As of this writing,
prices start at $15 per month for up to 500 e-mails per month, (www.
constantcontact . com)
W iContact: This service is quickly growing in popularity, in large part because
it's priced more competitively than Constant Contact and offers more newslet-
ter designs to choose from. As of this writing, prices start at $9.95 per month.
(www. i contact . com)
Benchmark Email: In this increasingly competitive category, Benchmark
offers 600 e-mails per month for $9.95 or a popular $19.95-per-month
plan that enables you to send up to 2,500 messages per month, (www.
benchmarkemail . com)
Chapter 15: Ten Cool Services for Your Site
U.S. taut and e-mail newsletters or other bulk messages
bulk e-mail messages of any
the basics you need to know
about U.S. law, as well as generally-recom-
mended netiquette. For more details about
how the laws vary from state to state, visit
www.mass-emailer.com/bulk_email_info.
html. If you live outside the United States,
your government Web site likely provides
the information you need to stay in good
legal standing.
No false or misleading information in
the header area of an e-mail: Spammers
do it all the time (and many get caught,
or at least blocked by spam filters for the
practice). If you're sending a legitimate
message, make sure the address you
use in the From field of the message is
your legitimate e-mail address, and also
that any addresses you display in the To
field are real. One of the biggest advan-
tages of using an e-mail service (such as
iContact) is that it provides a contact
manager with which you can manage all
your e-mail addresses.
v 0 Deceptive subject lines: You can't claim
that the e-mail is about dogs and cats in
the subject line and then try to sell the
recipient guinea pigs via the message.
w An opt-out method: There must be an
easy way for recipients to let you know
they don't want to receive any more mes-
sages from you — and you must remove
them from your list if they do. This is one
of the best reasons to use a service, such
as Benchmark Email or iContact because
all these services enable subscribers to
opt-out automatically.
Compliance with restrictions on distrib-
uting addresses you collect: You cannot
sell or transfer e-mail addresses of
people who have chosen not to receive
your e-mail, and you cannot help any
other entity send them messages (even
if you don't charge for the service).
w Clear intent: All commercial e-mail must
be identified as an advertisement and
must include the sender's postal
address.
Downloading Professional Images
Inexpensively
Professional photographs and graphics can transform a simple page design into a
professional showcase. High-quality images can be pricey, though. For professional,
royalty-free images without the high price tag, visit iStockphoto (www. istock
photo . com) where you can buy — and sell — high-quality photos and other
images for $1 to $5 (depending on the resolution).
This searchable site makes it easy to find all kinds of photographs, illustrations,
and even animated graphics and videos. Search for German Shepherd, for example,
and you'll find nearly 1,000 photos of those lovely beasts; search for dogs, and
you'll find more than 16,000. You can even search for general terms, such as smile
or raised hands, to find images to fit almost any design idea or Web site.
When you find a photo that you like at iStockphoto, you can download a comp ver-
sion for free. Free images have the iStockphoto logo printed across the middle but
are handy to use for mockups. You can also save images to a collection (a lightbox)
stored on the iStockphoto Web site so you can easily go back and review your
favorites later.
300 Part IV: The Part of Tens
When you're ready to purchase images, you can use any major credit card to buy
credits on the site. The more credits you buy in advance, the better the price. The
cost of each image is based on the resolution: The higher the resolution, the more
the image costs, but most images are available in multiple resolutions. Prices can
ctyLl^©age, but most low-resolution images (less than 400 pixels wide at 72 dpi),
ifhYterk fine for most Web sites, cost as little as $1. Make sure the read the
license agreement for details.
If you're looking for free images, or you like the idea of using images that are pro-
vided for free by photographer directly, consider www . sxc . hu, where you find
more than 300,000 images from more than 30,000 photographers. Again, make sure
to read the contract details carefully because some images on this site require that
you work out the right to use the images with the photographers directly.
In Chapter 5, 1 give you instructions for editing, resizing, and saving images. See
Chapter 6 for instructions for inserting images into your Web pages.
Highlighting Links With Pop-Up Previews
The innovative online service Snap-shots (www. snap . com) creates a small pop-up
preview of any page you link to on your site. You simply sign up for the free service
at Snap.com and use its online tool to generate special code that you can copy and
paste into the code in your Web pages.
With the unique Snap.com pop-ups, anytime a visitor rolls the cursor over a link, a
small pop-up window appears with a preview that displays the page or site that you
linked to from your site. It's a useful way to give visitors a little more information as
they peruse your pages and to highlight the links on your site.
WhatTheFont) ( An Online Matchmaker)
If you've ever tried to identify an unusual font, you know how challenging it can
be — and you'll likely appreciate the character recognition software offered from
WhatTheFont (www. what the font . com). Using this free online service, you can
upload any graphic or enter the URL to any image on the Web, and the program
analyzes the image and tries to identify the font.
The system isn't perfect, but even if WhatTheFont can't identify the exact font, it
gives you the closest matches it can find, which at least gets you pointed in the
right direction. You can also opt for the "human" service, to have your graphic fur-
ther reviewed by expert font matchers.
And, if you want to buy the font after you use the service to identify it, the site's
creators are happy to sell you fonts that you download to your own computer. For
more on the best options for using fonts on the Web, see Chapter 6.
Another great place to test fonts . . . www . daf ont . com.
Chapter 15: Ten Cool Services for Your Site J
Surveying \lour Visitors
If y© u want to know what visitors to your site really think, just ask them.
mesurvey is a helpful way to gauge the experience of your audience and to
invite reviews. You can also use online surveys as planning tools to poll your audi-
ence about how and where they might want an event, for example, or what new fea-
tures they're most interested in.
You can create a free, online survey from SurveyMonkey (www . surveymonkey .
com) and link to it from your Web site. SurveyMonkey makes it easy to create the
survey by simply filling out a form in a Web browser, and then it automatically tal-
lies the results and presents them in a series of reports and pie charts. The data
you can gather and present is an excellent way to impress your board of directors
at your company's next annual meeting.
Dressing Up the Address Bar With a Favicon
Have you ever wondered how some sites add those little custom graphics to the
address bar, at the top of the browser? For example, Google adds the letter G, and
Adobe adds its logo. You too can add any image to your site — you just have to get
it in the right format.
Fortunately, turning a graphic into a favicon (or shortcut icon) is easy and free with
Favlcon from Pics (www.htmlkit.com/services/favicon). Just upload any
graphic of your own, and this online tool automatically converts it into a favicon
that you can use on your site. After your image is saved in the ICO format, you
simply upload it to the main root folder of your Web site, and your image is auto-
matically displayed on the address bar in a browser.
Favicons also appear in the list of bookmarks, or favorites (which is where the
name comes from) when a visitor saves your Web site in a browser. Thus, including
a favicon can make your site stand out from a list of saved Web addresses and can
help build and strengthen your brand.
Protecting \lour E-Mail Address
from Spammers
Spammers gather millions of e-mail addresses from Web sites every day by collecting
e-mail addresses from links on Web pages. Web designers commonly include e-mail
links so that visitors can easily contact them. Unfortunately, those simple e-mail links
make it even easier for spammers to gather e-mail addresses automatically.
To help counter this problem, the programmers at AddressMunger (www .
addressmunger . com) have come up with a special way of "hiding" e-mail
addresses from the automated bots that spammers use. When you add this special
Part IV: The Part of Tens
code to your Web pages and use AddressMunger to create the e-mail links on your
Web pages, your visitors can still e-mail you easily, but spammers can't read your
e-mail address. It's an easy way to cut down on all that spam in your inbox.
DropBooks
service, you need two snippets of code:
\^ One that you insert into the top of a Web page
\^ Another that you add wherever you want your e-mail address to appear
You can find instructions for adding code to your pages in Chapter 13.
Setting Up Free Conference Calls
Want to set up a conference call for free? Really, for free. Well, you do have to pay
any long-distance charges you incur if your call to the conference center requires
dialoging a long-distance number, but if you have an unlimited calling plan with
your phone company, you're already covered on that front. You can pay extra for
an 800 number, but if you're willing to let the service pick the number, all you pay
are any necessary toll call charges.
To use the service, simply visit FreeConference at www. f reeconf erence . com,
sign up for the free account, and immediately start scheduling conference calls.
You can invite as many people as you like into the call. FreeConference even
includes a handy system for managing contact information and sending out invites
on your behalf.
I use the service on a regular basis to schedule conference calls with clients and
students. You can even add desktop sharing for $9 per month, making it possible to
simultaneously share information on your computer or use the service. That makes it
ideal for Webinars, review sessions, or other kinds of collaborative meetings online.
The company makes money by charging for specialized services, such as the use of
an 800 number, or if you want FreeConference to record or transcribe your calls.
And like most things that are free, FreeConference can't guarantee availability, so
scheduling in advance is always wise although I've rarely had any trouble setting up
a call, even at the last minute.
Sharing PowerPoint Presentations
Online training, teleconferences, and virtual seminars are increasingly popular,
thanks to services like SlideShare (www. slide share . net). To use this innovative
service, just upload your presentation to the site and point visitors to your special
address, where they can view your slides and use the simple controls at SlideShare
to move forward and back through your presentation.
Combine SlideShare with a service like FreeConference, and you're ready to host a
professional teleconference or online seminar — without spending a cent.
Chapter 16
DropBoflffiWays to Promote Your Site
In This Chapter
Optimizing your site for search engines
Paying for keywords on search engines
Building contacts on social networking sites
Ranking on social bookmarking sites
Attracting return visitors with regular updates
Finding useful ideas on other Web sites
Getting mentioned in traditional media
Spreading the word with viral marketing
^ Blogging
Reaching out to your personal contacts
What if you build a Web site, and nobody comes? Unfortunately, that's
an all-too-common problem on the Internet. And, that's why I can't end
this book without at least pointing you to a few places where you can promote
your Web site. Driving significant traffic to the pages of a site requires a significant
amount of time or money or an incredibly compelling message. If you can manage
all three, you should do very well indeed. In this chapter, you find tips and online
resources to help bring people to your Web site.
Scoring High in Search Engines
The buzzword here is search engine optimization, or SEO, a highly complicated sci-
ence that involves getting search engines like Google, Bing, and Yahoo! to list your
Web site higher on the page than your competitors.
Thousands of companies and services promise to "get you in the top 10 matches" on
search engines for as little as $19.99. Be wary of these services. The truly good ones
charge hundreds or even thousands of dollars per month (with good reason), and
the bad ones can get you delisted from search engines for breaking the rules with
old tricks like inserting the word sex into your code when you're site is really about
car maintenance. Most SEO experts agree that the best way to score high in search
engines is to provide useful information on your site and to use appropriate key-
words effectively.
Part IV: The Part of Tens
DropBo
Scoring high in Web searches is complicated because millions of sites vie for the
top spots and search engines use complex formulas to determine which Web site
should match any given key word search. Search engines also guard their formulas
for l|ow they prioritize Web sites more carefully than Coca-Cola guards its recipe.
J doesn't make it complicated enough, most search engines change their
egularly. (How regularly is also secret.)
The reason for all this secrecy is that the people who run sites like Google and
Bing want to deliver the best results when someone conducts a search — not just
a list of the sites that smart Web marketers figured out how to trick their way into
top position. Because there's much money to be made at the top, Web marketers
spend countless hours testing how search engines work to come up with their best
guesses about the criteria that search engines are using and how best to move their
sites up the list.
The result is sort of a cat-and-mouse game, with search engines changing the rules to
thwart the most calculated efforts of specialist's in SEO, and people who specialize in
SEO charging big bucks to figure out the secret formula that can put you on top.
For the most part, search engines score sites based on the words and images on
Web pages and on how well their content matches the keywords that are searched.
For example, if you own a B&B in Point Reyes Station, California, you should include
at least the name Point Reyes Station on your Web site because the term B&B has
many competitors and people searching for lodging in the area are likely to include
the town's name in their search.
A great way to determine how best to make your own site search engine friendly is
to search for keywords that you want to lead people to your site and then study the
Web sites that match those words already. Often, the best way to move your Web
site up the ranks in search results is to emulate the strategies of other sites that are
already doing well.
Achieving the best placement, especially for popular keywords, is a full-time job,
but here are a few tips that most SEO specialists agree are likely to help you score
better in search engine searches.
Invite other sites to link to you. It's widely believed that Google rewards
people who attract the most links to their sites, especially if those sites
already have good rankings themselves. It makes sense: If lots of other Web
sites consider your site good enough to send their visitors to you, you prob-
ably have something of value to offer.
Fill your site with fresh, original content related to your business or indus-
try. Include tips, articles, tutorials, and other content that's valuable to your
visitors, and don't stop there. Keeping your content updated by adding fresh
information on a regular basis is another great way to keep search engines —
and visitors — interested.
Develop a list of keywords and a good description for your site. The trick to
writing a good Web site description is making it concise (every word counts),
packing it with your most important keywords, and phrasing it so that it reads
like a sentence (not just a list of words). Include this description toward the
top of your home page in the meta description tag, which is a special tag that
can be used to add information just for search engines. (You find instructions
for adding Meta descriptions and keyword content in Chapter 6.)
Chapter 16: Ten Ways to Promote Your Site
DropBoo
Include your most important keywords in the title of your Web page and the
name of the file. The title doesn't appear in the body of a Web page; the title
appears at the top of the browser window. You can add or edit the title of a
page in Dreamweaver by changing the text in the Title field at the very top of
orkspace. Similarly, including keywords in the filename of each page in
Web site can also boost rankings.
Include keywords in the headlines on your Web page. Most search engines
place higher priority on keywords that appear in the headlines on a page, but
only if you use XHTML heading tags to style those headlines. Heading tags,
which include hi (the biggest) through h6 (the smallest), identify text as head-
lines in a way that search engines easily recognize.
\^ Don't expect instant (or permanent) results. Even if you do everything right
in the search engine search game, you might still have to wait for the results
of your efforts to be recognized. Some search engines can take weeks or
months to reflect changes to Web pages on the Internet. Search engines, such
as Google, generally update the most popular sites very quickly while lagging
weeks or months behind in updating less-visited sites.
A great place to learn more about how search engines work and how to achieve the
best ranking is www. searchenginewatch. com.
Buying Traffic (lies, \lou Ready Can!)
In addition to the "natural" results that search engines deliver when someone
does a keyword search, buying keywords on search engines helps to ensure that
your site is listed when someone searches for words that are relevant to your site,
although the process is far more complex than most people realize. Search engine
ads generally appear at the top and right side of most search-result pages.
Not all keywords sell for the same price. Using a complex bidding process, most
search engines charge significantly more for the most popular keywords. Adding to
the complexity, the results of those keywords for your site can vary dramatically
based on a dizzying array of factors. For example, the expensive keyword Hawaii
may bring the most amount of traffic to your site, but the lower-priced keyword
luau may result in more reservations to your hotel. Because it's possible to mea-
sure not only the traffic from a keyword search but also the actions of the person
who clicks on that keyword, you can measure and compare the effectiveness of
nearly every aspect of search engine advertising.
Again, this process can be highly complex. Just developing a list of keywords worth
purchasing seems easier than it really is at first. Sure, if you have a B&B in Point
Reyes, you can likely make a list of a few dozen obvious words quickly. But the real
art of developing a list of keywords for search engine advertising requires more
than just brainstorming a few words related to your business. The best SEO compa-
nies come up with hundreds or thousands of keywords and phrases and then track
the results to find the best return on dollars spent for paying customers. Thus, run-
ning a campaign with 10,000 words might not cost much more than running a cam-
paign with 100 words, and might prove much more effective over time.
Part IV: The Part of Tens
Add to that strategy the importance of landing pages and sales messages. The
most sophisticated ad campaigns involve creating special Web pages to go with
each keyword ad. For example, you can create a special page (often called a land-
ing mage) on your Hawaiian hotel site for people who click the search term scuba
\itdft(&t is different from the page for those who click the search term health
i«in learn more about how to make the most of your keyword ads by care-
fully reading the instructions and tips on any site where you plan to advertise.
Google AdSense offers the largest online advertising program for keywords. Just
click the Advertise button at www. google . com to find detailed instructions and a
number of tips and tools to help you develop the best campaign and measure the
results.
In addition to buying ads on Google, you can include Google Ads on your own Web
site to earn advertising income. In Chapter 14, you find tips on how to earn income
from your site with Google Ads.
Using Social Networking Sites
for Promotion
Social networking, the art of meeting and building contacts on the Web, is an
increasingly popular way to increase your personal and professional contacts,
make new friends, develop professional relationships, and even find a new job. You
can also use social networking sites to promote your personal or business Web
site. Netiquette (Internet etiquette) calls for a subtle approach to promoting your
site in these kinds of environments, but simply including your Web address in your
online profile can help drive new people to your site.
Here are some of the most popular social networking sites and what you can expect
to find there:
Facebook: (www. f acebook. com) Facebook wins top place as the fastest
growing social networking site on the Web, and its broad appeal makes it an
excellent place to promote your Web site. Facebook was originally considered
a vanity site and a place for college students, but its professional power is
growing with its ever-expanding audience.
Linkedln: (www. linkedin. com) This is the site for professional connections
and online business networking. If you're online to develop business contacts
with other professionals, especially if you're job hunting or trying to attract
new business clients, this is a powerful place to promote yourself and your
Web site. Unlike Facebook and MySpace, Linkedln is all business.
W MySpace: (www. myspace . com) One of the all-time most popular social net-
working sites, MySpace makes it easy to create a profile site, add music, write
a blog, and post as many photos as you want to share with the world. Although
the site has dominated the social networking landscape on the Internet, at
the time of this writing, it was rapidly falling behind its biggest competitor,
Facebook. Still, its huge online audience is a popular place for musicians, per-
formers, and many others to promote themselves and their Web sites.
Chapter 16: Ten Ways to Promote Your Site
DropBooks
Ecademy: (www.ecademy.com) Similar to Linkedln, Ecademy is a site where
professionals network, seek new clients, hunt for jobs, and recruit employees.
What makes Ecademy different is that it's much more international, with an
especially strong audience in Europe and Asia.
(www . ning . com) You can create your own social networking site at
Ning and invite your friends and colleagues to create profiles there in your
own exclusive social network environment.
Getting Ranked on Social
Bookmarking Sites
Social bookmarking sites rank the popularity of Web pages by the number of votes
they get. The result is that these sites are excellent resources for people who want
to keep up with what's popular online. Most offer special software that makes it
easy for anyone to vote on a site.
Getting your site listed on social bookmarking sites is a highly effective way to
increase traffic. Dozens of these sites and services exist, with more sure to come,
and they feature catchy and unusual names, like Digg (http : / /digg . com),
delicious (http: / /delicious . com), StumbleUpon (www.stumbleupon.com,
and reddit (www. reddit . com).
Although you can submit your own pages on any of these sites, it's generally
frowned upon and if you do it too frequently, you can be banned. Besides, your one
little vote won't make much different anyway. A better method is to add a button to
your site from each of these services that makes it easy for your visitors to vote for
you. If you're a blogger, you can add a button each time you post. You can get the
buttons (chicklets) for free and add them to your pages by simply inserting a little
code you generate on the social networking site. (Find instructions for adding code
to your pages in Chapter 6.)
Enticing Visitors to Return for Updates
One of the best ways to improve traffic to your site is through repeat visitors, and
regular updates to your site can make all the difference. If you want your visitors to
know when to look for updates, consider making regular changes to your Web site.
Add a post to your blog every Thursday morning, for example, or post your newest
photos to the site on Saturday mornings. Regular updates help get people in the
habit of visiting your site.
Gathering Ideas from Other Web Sites
One of the best ways to create good habits in Web design is to visit other people's
Web sites and study what works and what doesn't on their pages. While you're
there, check out the title of the page, any descriptive text, or keywords that are
308 Part IV: The Part of Tens
DropBodls
used throughout the site. As you look at related Web sites, ask yourself what you
like about the site and why you like it. Also, determine whether you can easily find
the information you're most interested in and how easily you can navigate around
the site.
the best way to discover the problems in your own Web site is to look for
problems on someone else's site and then return to yours with a fresh perspective.
Marketing a Web Site to the Media
Attracting traditional media attention to your Web site is not unlike attracting
it to any other business. The trick is to tell a good story and get the attention of
someone who can write about it in a publication that's read by your target audi-
ence. If you're looking for press coverage, make sure to include a Press section on
your Web site with contact information, story ideas, and any other press coverage
you've received.
Don't wait for journalists to come to you! You should never pester a reporter with
a barrage of e-mail, press releases, or phone calls, but a well-timed or well-pitched
message can get the attention of a reporter and the desired result — your Web
address in the press. One good way to find journalists who might be interested in
your site is to visit related sites and study their Press sections to find out who has
been writing about them. Note not only the publication but also the writer. Then
send a note directly to that person with a message that starts like this:
Dear fabulous journalist <insert that person's name, of course>:
I enjoyed reading the article you wrote on the XYZ company and thought that
you might be interested in what we're doing.
Keep your message brief, and try to include a news hook and story idea that go
beyond just promoting your business. For example, rather than tell a reporter that
you have the best B&B site in northern California, pitch a story about the best hikes
in the area. With any luck, the article on great hikes will include a quote from you
and a mention of your B&B's Web site (especially if the reporter can send readers
to your online list of hiking tips).
Unleashing the Pouter of Virai Marketing
Viral marketing is another of the marketing industry's new buzzwords in the digital
age. The idea is that a message (a video, an article, or a photo, for example) is so
exciting, fun, and compelling that people want to share it with each other, passing it
on to their friends, who then pass it on to their friends, until it spreads like a virus.
Such messages are often sent via e-mail, blogs, or chat, which can make the ever-
expanding impact happen at an almost instantaneous pace.
Tap in to the power of viral marketing, and you can become an overnight sensation.
Humor seems to be the most effective strategy. Among the mainstays of the viral
phenomena are those silly photos of cats with clever sayings. Known as the LOL
cats, these photos have spawned several Web sites, like Icanhascheeseburger.com.
Chapter 16: Ten Ways to Promote Your Site
Funny video clips, the kind you would expect to see featured on a show like America's
Funniest Home Videos, are also highly viral because they're shared around the Web.
DropBoS
To |ise viral marketing to attract traffic to your Web site, include a section with
^I^fctos, industry jokes, or a Top 10 list, and you might just get visitors to tell
J SJfelrjr^ends about your site.
Btoqqinq, Bloqqinq, Bloqqinq
Creating a blog and adding it to your Web site makes it easy to add fresh content
because blogs are designed for frequent updates. When you become a blogger, you
also join the ranks of a prolific group of writers who regularly refer their readers to
each other's Web sites.
Don't launch a blog just to "do it." Make sure that your blog features interesting, rele-
vant information for your audience and that you update it regularly. And, if you want
your blog to serve as an effective marketing tool, take the time to participate in other
people's blogs. Adding relevant tips and thoughtful comments to other people's
blogs is an excellent way to get their visitors to come back to your Web site.
Instructions for creating a blog and integrating it into your Web site are in Chapter 11.
Using Twitter to Promote \lour Site
One of the most popular new forms of social media can be found at www. twitter .
com. Described as micro blogging, Twitter makes it easy to register and start shar-
ing your words of wisdom, but you have to keep it brief. Twitter limits users to 140
characters (about a sentence) of text per post. At first, many users complained that
Twitter was a trivial place where people shared too many boring details, such as
"I'm going to lunch at Red Lobster now."
But as Twitter has evolved, it's become an incredibly popular way for friends to
stay in touch, and for businesses, actors, and others to promote themselves. Just
visit www. twitter . com and register for a free account, and you can start posting
short messages about what you're doing, what you're thinking, or questions you're
pondering. Anyone who uses Twitter can subscribe to the Twitter feed of anyone
else who uses Twitter and receive all their comments, called Tweets.
Telling Everyone \lou Know
It might seem obvious, but many people are either too shy or too busy to reach out
to their friends, family, and personal contacts when they launch a Web site. Don't
overlook your most obvious supporters. Launching a new Web site, or redesigning
an existing site, is an excellent excuse to e-mail personal and professional contacts.
To make the announcement even more fun, consider sending an e-card with a color-
ful character, animation, or music to dramatize your announcement.
Part IV: The Part of Tens
r-N site-but yo
DropBocte
Hallmark.com is one of my favorite e-card sites because it has lots of free cards
with clever sayings, professional designs, and interactive animations. Most of
its free e-cards even include sound. BlueMountain.com is another useful e-card
site,|but you have to pay for the pleasure of sending its professional greetings.
sing an e-card to announce your Web site, look for blank cards or the
and Any Occasion sections, where you can find messages that are easily
personalized for nearly any kind of Web site.
Make sure you include your URL on all your marketing and other materials, too.
Your Web address should be prominently displayed on your business cards, bro-
chures, stationery, and anywhere else you promote your business.
DropBooks
Index
Symbols and Numerics
# (pound) character, 59
l&l Internet Web site, 293
72 ppi, 78
A
about.html page, 132, 157, 172-173
AC_RunActiveContent . j s file,
Dreamweaver, 263
Access drop-down list box, Site Definition
dialog box, 210
accessibility, 56, 259
account, Google Analytics, 217-218
Active Links option, Page Properties
dialog box, 117
Add an Image window, WordPress, 238
Add Browser dialog box, Dreamweaver, 202
Add New Post page, WordPress, 236-237
Add New Tag text box, WordPress, 238
Additional Search Options link, Commission
Junction Get Links page, 285
address, distribution of e-mail, 299
AddressMunger Web site, 114, 301-302
Adobe Audition program, 249
Adobe Browser Labs Web site, 204
Adobe Contribute, 19
Adobe Dreamweaver. See Dreamweaver, Adobe
Adobe Fireworks, 20
Adobe Flash
animation files, inserting into page, 260-263
overview, 259
player, 258
templates, 17
video, 258, 264-270
Adobe Media Encoder program, 264-267
Adobe Photoshop, 18, 20
Adobe Photoshop Elements
background images, creating, 175-177
banner graphics, customizing, 134-137
Business Template, editing and sizing images
for, 159-164
images, combining photos and text in, 85-90
images, cropping, 75-76
images, resizing, 77-78
images with multiple layers, 91-93
menu bar, 73
Options bar, 72-73
overview, 18, 20, 69-70
panels, 73-74
starter image templates, editing, 182-188
Toolbox, 70-72
Adobe Soundbooth program, 249
Adobe Web site, 271
AdSense, Google, 127, 276-281, 306
AdSense for Content page, Google
AdSense, 280-281
AdSense Setup tab, Google AdSense, 279
Advanced Mode option, Export Settings dialog
box, 266
Advanced tab, Site Definition dialog box, 97
advertising, 275-281. See also promoting
Web site
Advertising Programs page, Google, 277
. aero domain, 40
affiliate program, 282-287
alignment, image, 109, 142
Amazon affiliate program, 282, 287
American Airlines domain name, 36
Analytics, Google, 127-128, 217-219, 297-298
animation, 257-259
AP Div, 53-54
Appearance (CSS) category, Page Properties
dialog box, 115-116
Apple iTunes, 255
Apple MobileMe Web site, 133
. asp extension, 17
ASP template, Microsoft, 17
ASP.NET site, 17
. aspx extension, 17
Atom feed, 242
Audacity program
editing recording, 250-254
music track, 256
recording podcasts, 246-249
audience, target, 23
audio. See podcast
audio format, 258
Audio tab, Export Settings dialog box, 266
Audio Video Interleave (AVI) format, 258
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Audition program, Adobe, 249
Austin Relax massage site, 12, 199
Automatically Upload Files to Server on Save
ka^efinition dialog box, 212
rj^oJ(^c|e\5!^rleave) format, 258
AWStats program, 220
B
Background Color swatch box, Page Properties
dialog box, 116
bandwidth, 43-44
bank confirmation, PayPal, 291
banner graphics
business site, 167
customizing, 134-137
gallery templates, 152-153
overview, 132
portfolio home page, customizing, 148-149
starter image templates, 187
Benchmark Email service, 298
biography, 139
Bitrate options, Export Settings dialog box, 266
.biz domain, 40
_blank target option, 111
blog
benefits, 18
blogging software, 229
creating, 15
Google Analytics code, adding, 219
overview, 13, 223
posting to, 236-241
promotion methods, 309
style of, 241
template, 230-235
titles, 233
Web hosting packages, 44
WordPress, starting, 224-228
Blog Title field, WordPress, 226
Blogger software, 229
BlueMountain Web site, 310
body tag, 105
box model, 57
broken link, 32, 208
Browse icon, Dreamweaver, 98
browser
function of, 50
previewing in multiple, 201-203
site appearance, effect on, 198, 200
testing site designs before publishing, 122
browser emulator, 204-205
Browsershots Web site, 204-205
budget, project plan, 27-29
business site
Dreamweaver Web template, 171-174
images, 159-164
overview, 12, 155
page layouts, background images in, 175-177
pages, creating, 165-170
templates, 155-158
Cascading Style Sheets (CSS)
advantages of, 54-56
class selectors, 58-59
compound styles, 61-62
ID selectors, 59-60
overview, 51-52, 54
page layouts, 57-58
rule definition options, 62-63
tag selectors, 60-61
viewing code, 65
XHTML, combining with, 56-57
case sensitivity, domain name, 36-37
Categories section, WordPress, 240
Category box, Site Definition dialog box, 97
Category list, CSS Rule Definition dialog box, 105
cellphone
designing pages with CSS for, 55
limitations of, 29-30
channel, 281
character recognition software, 300
Check Links Sitewide option,
Dreamweaver, 207-208
Check Spelling icon, WordPress, 239
Chitika Web site, 287
Chocolate Game Rules Web site, 51-52
Choose Local Root Folder dialog box,
Dreamweaver, 138
CJ Account Manager, Commission Junction, 284
class selector, CSS, 58-59
class style, 58-59
Clicky Web analytics service, 220
club site, 11
Code view, Dreamweaver, 48-49
color
of advertisements, 280
setting, in Dreamweaver, 115-116
. com domain, 39-40
Commission Junction affiliate program, 282-287
Commit icon, Crop tool, 76
Index 313
competitor site, reviewing, 29
compound style, CSS, 61-62
c onfe rence call, free, 302
^cl^rn^iai^^raaU^WordPress, 227
jnpd^t^ J^Jtflfl^pQHost icon,
Dreamweaver, 213-214
consistency, of Web design, 30-31
Constant Contact service, 298
Constrain Proportions check box, Image Size
dialog box, 78
consulting service, cost of, 28
contact.html page, 157
content, collecting, 26, 30
content list, 24-25
Contribute, Adobe, 19
conventions used in book, 2-3
. coop domain, 40
cost, of Web site, 10, 27-29
country domain, 40
Create Buy Now Button form, PayPal, 292
Create New Website Profile page, Google
Analytics, 218
Crop tool, Photoshop Elements, 75-76, 187
Cross Browser Testing Web site, 204
CSS. See Cascading Style Sheets
ess folder, Family template, 181
CSS Rule Definition dialog box, Dreamweaver,
104-105, 119, 143, 169
CSS Rule dialog box, Dreamweaver, 59-63
CSS Styles panel, Dreamweaver, 103
Custom Header link, Wordpress, 231
CuteFTP program, 216
0
Dashboard, WordPress, 228 ■
dead air, deleting, 254
deadline, 27
dedicated FTP program, 216
default.html page, 100
deleting noise, Audacity, 251
design. See Web design
Design view, Dreamweaver, 48
Detect Size button, Insert FLV dialog box, 269
Device Central, Dreamweaver, 55, 203
Digital Family Web site, 2, 19, 36
digital format, 26
disk space, 44
<div> tag, 51, 57, 176
domain name
availability, 38-39
in budget, 28
country domains, 40
endings, 39-40, 42
hosting multiple sites, 45-46
overview, 35-36
registering, 40-42
selecting, 36-37
top-level domains, 39
WordPress blog, 225
Domain Web site, 38
downloading
design considerations for, 30
Dreamweaver templates, 17
existing sites, 96
files or folders in Dreamweaver, 216
image formats, 82
new browsers, 203
Dreamweaver, Adobe
AP Divs, 53-54
code, inserting, 127-128
Commission Junction code, inserting, 287
creating pages, 101-105, 165-170, 192-195
CSS Rule dialog box, 59-63
defining Web site, 97-100
Device Central, 55
Dynamic Web Templates, 145
Edit Font List dialog box, 64
existing site, setting up, 95-96
Family Web Site template, 189-191
Flash animation files, inserting, 260-263
Flash video, adding to site, 268-270
FTP, setting up, 209-212
FTP features, 213-216
Gallery templates, 150-154
Google Analytics code, adding, 219
images, inserting, 107-109
linking new pages, 192-195
linking to e-mail addresses, 113-114
linking to other pages in site, 110-111
linking to other Web sites, 112
link-testing features, 207-208
meta tags, 126
new site, setting up, 95-96
online profile, designing, 138-143
overview, 18-19, 95
page properties, 115-117
portfolio home page, customizing, 145-149
previewing pages in multiple
browsers, 201-203
setting up site, 95-96
styles, defining, 118-120
templates, 16-17, 121-125
(continued)
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Dreamweaver, Adobe (continued)
views in, 48
Web template, 171-174
ojf \j^<|^aQing, 274
. dwt extension, 16, 122
dynamic Web site, 13, 14-15
Dynamic Web Template, 145
Ecademy Web site, 307
e-card, 309-310
e-commerce
cost of transaction features, 28
PayPal buttons, adding to site, 288-292
services, 45
shopping cart system, 293
Web hosting packages, 44
Edit CSS option, WordPress Manage
Themes page, 235
Edit Font List dialog box, Dreamweaver, 64
editable region, of template, 123-124, 193
editing
Audacity recording, 250-254
Business Template, 172
existing sites, 96
images for template, 159-164
podcast, 250-254
starter image templates, 182-188
. edu domain, 40
Effect menu, Audacity, 253
effects, special, 30
elastic layout, 101
Elements. See Photoshop Elements
e-mail
addresses, linking to, 113-114
blog updates by, 241
newsletter services, 298
protecting addresses, 301-302
registration services, 41
Email Link dialog box, Dreamweaver, 114
Email Link icon, Common Insert panel, 113
Enable Cache option, Site Definition
dialog box, 99
Enable File Check In and Check Out option, Site
Definition dialog box, 212
Excerpt area, WordPress, 240
An existing external style sheet option, CSS Rule
dialog box, 63
export feature, Audacity, 248
Export Settings dialog box, Media
Encoder, 264-266
Expression Web, Microsoft, 18-19, 50
ExpressionEngine software, 229
Extensible Hypertext Markup Language
(XHTML)
combining with CSS, 56-57
overview, 47-50
page layouts, 57-58
external link, 112, 208
external style sheet, 63
Eyedropper tool, Save for Web dialog box, 83
•F •
Facebook Web site, 306
family site
creating pages, 192-196
designing for entire family, 189-191
group site templates, 179-181
linking pages, 192-196
overview, 12-13, 179
starter image templates, 182-188
templates, 179-181
Family Web Site template, 189-191
favicon, 301
feed, Twitter, 309
Fetch program, 216
file extension, 100
File Transfer Protocol (FTP)
features, of Dreamweaver, 96, 213-216
setting up, 209-212
filename, 100, 102
FileZilla program, 216
Fill Layer dialog box, Photoshop Elements, 136
FireFTP program, 216
Fireworks, Adobe, 20
fixed layout, 101
Flash
animation files, inserting into page, 260-263
overview, 259
player, 258
templates, 17
video, 258, 264-270
Flash Arcade Web site, 271
Flash Kit Web site, 271
Flickr Web site, 133
font, 30, 64, 119, 183
format
audio, 258
video, 258, 264-265
index 315
formatting, text, 103
frame, HTML, 52-53
free image editing program, 20
site, 302
page
FTP (File Transfer Protocol)
features, of Dreamweaver, 96, 213-216
setting up, 209-212
An FTP error occurred message, 212
FTP Host text box, Site Definition dialog box, 210
G
gallery template, 150-154
gallery.html page, 157
GarageBand program, 249
Gardens to Tables Web site, 15
Gcast Web site, 255
General settings, WordPress, 232
Get Ad Code page, Google AdSense, 281
Get Links page, Commission Junction, 285-286
Get Started page, PayPal, 290-291
GIF format, 82-84
goals, project plan, 22-24
Google AdSense, 127, 276-281, 306
Google Analytics, 127-128, 217-219, 297-298
Google Checkout for Merchants Web site, 293
Google Search tools, 33
GotoAndLearn Web site, 271
. gov domain, 40
graphics. See also Photoshop Elements
banner, 132, 134-137, 148-149, 152, 167, 187
GIF format, 82-84
JPEG format, 79-81
optimizing, 79-84
overview, 69
PNG format, 82-84
graphics program, 18, 20. See also specific
programs by name
group site template, 179-181
H
Hallmark Web site, 310
hardware, 198
header
blog, 231-232
e-mail, 299
heading, page, 60, 143, 169
headline, blog, 237
hierarchical tag, 49, 60
hobby site
creating pages, 192-196
designing for entire family, 189-191
family or group site templates, 179-181
linking pages, 192-196
overview, 179
starter image templates, 182-188
HockeyBuzz Web site, 9
home page
creating, 48
filenames, 100
portfolio site, customizing, 145-149
Web design, 31-32
hosting, Web. See Web hosting
HTML (Hyper Text Markup Language)
frames, 52-53
overview, 47-50
tables, 51-52
http : / / , in domain name, 37
HTTP address, 99
hybrid layout, 101
Hyperlink dialog box, Dreamweaver, 110-111
hyphen, in domain name, 37
icons used in book, 4
iContact service, 298
ID selector, CSS, 59-60
IFP3 Advanced Photo Websites, 133
image. See also graphics
Business Template, adding to, 166, 168
creating, 74
cropping, 75-76
digitalizing, 26
Dreamweaver Gallery template, 151-152
editable regions, adding to, 194
editing for template, 159-164
Family Web Site template, adding to, 191
home page, replacing on, 147
inserting, 107-109
with multiple layers, 91-93
opening in Elements, 74
for page layout background, 175-177
professional, downloading inexpensively,
299-300
for profiles, 140-142
resizing, 77-78
sizing for template, 159-164
starter template, 182-188
Web Sites Do-It- Yourself For Dummies, 2nd Edition
image editing program, 20. See also specific
programs by name
i mag e gallery, 131
Jila^^ige^dial >Sf- bfi^, Photoshop
Image Tag Accessibility Attributes dialog box,
Dreamweaver, 107, 141
images file, Business Template, 157
images folder
Dreamweaver, 98
Family template, 181
index.html page, 100, 132, 157, 180
. info domain, 40
inline style, 63
Insert FLV dialog box, Dreamweaver, 268-269
internal style, 62
iStockphoto Web site, 175, 299
iTunes, Apple, 255
Jasper Johal Photography Web site, 1 1
Java template, 1 7
Joomla! program, 15, 229
journalists, writing to, 308
JPEG format, 79-81
. j sp extension, 17
• K •
keyword, 304-305
Kitchen Sink, WordPress Add New
Post page, 237
Kodak Gallery Web site, 133
Kogi, 8
• L •
landing page, 306
language options, WordPress, 226
law regarding newsletters, 299
layers, starter image, 183
Layers panel, Photoshop Elements, 85-90,
91-93, 135, 183
layout
Business Template, 169-170
types of, 101
Legacy Tracking Code, Google Analytics, 218
line break, 106
link
broken, 32, 208
Business Template, 167
from other sites, 304
overview, 31
setting up, 32-33
styles, 116
Link Color option, Page Properties
dialog box, 117
Link Font drop-down list, Page Properties
dialog box, 117
Link text box, Property Inspector, 112
Linkedln Web site, 306
linking, in Dreamweaver
to e-mail addresses, 113-114
to other pages in site, 110-111
to other Web sites, 112
Links (CSS) category, Page Properties dialog
box, 116-117
Links Relative To radio buttons, Site Definition
dialog box, 98
LinkShare Web site, 282, 287
link-testing features, Dreamweaver, 207-208
Linux, 44
liquid layout, 101
Liquid Web company, 42-43
list
content, 24-25
task, 25-26
local root folder, 96
Local Root Folder text box, Site Definition
dialog box, 98
location, of page elements, 30
Login screen, WordPress, 228
main page, 100
Maintain Synchronization Information check
box, Site Definition dialog box, 212
Manage Sites dialog box, Dreamweaver, 99, 209
Manage Themes page, WordPress, 235
margin
image, 109
page, 116
marketing. See promoting Web site
mark-up language, 47
Marquee selection tool, Photoshop
Elements, 136
media. See also multimedia
marketing to, 308
stre aming, 44
^^Vp^aEcca^l urafl^am, Adobe, 264-267
I Menl t)jj|^lfteqto Elements, 73
Merchant Services tab, PayPal, 291
metatag, 126, 304
micro blogging, 309
Microsoft ASP template, 17
Microsoft Expression Web, 18-19, 50
Microsoft Project, 26
.mil domain, 40
.mobi domain, 40
mobile device
CSS, designing with, for, 55
designing for, 206
limitations of, 29-30
mobile phone emulator, 206
money, making
advertisers, 276-281
affiliate programs, 282-287
Google AdSense, 276-281
overview, 275
PayPal, 288-292
Movable Type software, 229
Move tool, Photoshop Elements, 136, 161,
163, 184
multimedia. See also Adobe Flash
animation, 257-259
Business Template, 174
mobile devices, 206
overview, 16, 257
uploading videos, 272-274
video, playing on Web, 257-259
.museum domain, 40
music, in podcast, 256
MyPodcast Recorder program, 249
MySpace Web site, 306
• M.
. name domain, 40
navigation, in Web design, 31
navigation bar, 32
.net domain, 40
netiquette, 306
New CSS Rule dialog box, Dreamweaver, 118-119
New dialog box, Photoshop Elements, 85
New Document dialog box, Dreamweaver
blank page, creating, 101-102
Blank Template option, 121
Business Template, generating, 173
Page from Template option, 124, 146
Portfolio template, 150
New Editable Region dialog box,
Dreamweaver, 124
New File dialog box, Photoshop Elements, 74
New Style Sheet file option, CSS Rule
dialog box, 63
New Tracking Code, Google Analytics, 218
news.html page, 157
newsletter service, 298-299
Ning Web site, 307
noise, deleting in Audacity, 251
Normalize dialog box, Audacity, 253
•0 •
objectives, project plan, 22-24
OCR (Optical Character Recognition)
software, 26
l&l Internet Web site, 293
one-click service, 44
oneColFixCtrHdr body class, 104
online magazine, 32
online Web-traffic service, 220
Optical Character Recognition (OCR)
software, 26
optimizing
graphics, 82-84
multimedia, 259
photos, 26, 79-81, 187-188
Options bar, Photoshop Elements, 72-73
opt-out method, for message, 299
. org domain, 40
organization, of Web design, 31
organization site, 1 1
orphaned file, 208
Others tab, Export Settings dialog box, 267
Outblush Web site, 9
overwriting file, 215
• P •
padding, 109
Page Font drop-down list, Page Properties
dialog box, 115
page layout
background images, 175-177
with CSS and XHTML, 57-58
Page Properties dialog box, Dreamweaver,
105, 115-117
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Page Type column, New Document
dialog box, 101
pages folder, Family template, 181
ls^BhatoJ^i>fiJements, 73-74
_parent target option, 111
password, WordPress, 224-225
PayLoadz Web site, 293
PayPal, 288-292
Pearl template, 17
Perez Hilton Web site, 9
Permalink, WordPress Add New Post page, 237
personal biography, 139
photo. See image
photol .html pages, 132-133
Photobucket Web site, 133
photography site, professional, 131
photo-sharing Web site, 131, 133
Photoshop, 18, 20
Photoshop Elements
background images, creating, 175-177
banner graphics, customizing, 134-137
Business Template, editing and sizing images
for, 159-164
images, combining photos and text in, 85-90
images, cropping, 75-76
images, resizing, 77-78
images with multiple layers, 91-93
menu bar, 73
Options bar, 72-73
overview, 18, 20, 69-70
panels, 73-74
starter image templates, editing, 182-188
Toolbox, 70-72
.php extensions, 17
ping, 242
Pink Flamingos site, 52-53
Piwik program, 220
Pixel Dimensions area, Image Size dialog box, 78
player, multimedia, 257-259
PNG format, 82-84
podcast
editing, 250-254
overview, 243
preparing, 244-245
publishing, 255
recording, 246-248
Podcast Alley Web site, 255
The Podcast Network, 255
Podcasting Tools Web site, 255
pop-up link preview service, 300
portfolio site
banner graphics, 134-137
gallery templates, 150-154
home page, customizing, 145-149
overview, 10-11, 129
template, 131-133
posting, to blog, 236-241
pound (#) character, 59
PowerPoint presentation, sharing, 302
Press section, Web site, 308
previewing page, 111, 144, 201-203
privacy, 41
Privacy check box, WordPress, 226
. prl extension, 17
product, selling, 275
product site, 32
Products & Services tab, PayPal, 288-289
professional biography, 139
professional images, on site, 299-300
profile site
banner graphics, 134-137
gallery templates, 150-154
online profile, designing, 138, 140-144
overview, 11-12, 129
template, 130-131
Project, Microsoft, 26
Project Bin, Photoshop Elements, 86-87
project plan
budget, 27-29
content list, 24-25
goals, 22-24
objectives, 22-24
overview, 21-22
task list, 25-26
team, 29
timeline, 26-27
promoting blog, 242
promoting Web site
blogging, 309
ideas from other sites, 307-308
marketing to media, 308
overview, 303
search engine optimization, 303-305
social bookmarking sites, 307
social networking sites, 306-307
traffic, buying, 305-306
Twitter, 309
updates, 307
viral marketing, 308-309
word of mouth, 309-310
Propaganda program, 249
Index
Property Inspector, Dreamweaver, 112, 262-263
ProStores Web site, 293
publisher registration page, Commission
Juastioi^ |8>
appearance on different browsers, 200
appearance on different computers, 198-199
Dreamweaver options, 211
FTP, setting up, 209-212
FTP features, 213-216
Google Analytics, 217-219
link-testing features, 207-208
online browser emulators, 204-205
overview, 197-198
previewing in multiple browsers, 201-203
static Web pages, 14
0
Quality setting, Save for Web dialog box, 80-81
QuickTime video format, 258
R
Rackspace company, 43
recording podcast, 245
Rectangular Marquee tool, Photoshop
Elements, 186
Redo option, Photoshop Elements, 72
registration, domain name, 37, 40-42
relative link, 110
Remote Info category, Site Definition
dialog box, 210-212
Resample Image check box, Image Size
dialog box, 77-78
resizing image, 77-78, 185
resolution, 77, 198
revenue. See money, making
Revert option, Photoshop Elements, 72
Rollover Links option, Page Properties
dialog box, 117
rotating image, in Photoshop Elements, 160
RSS feed, 242
Rule Definition area, New CSS Rule
dialog box, 119
rule definition, CSS, 62-63
•5»
Save As Template dialog box, Dreamweaver, 122
Save for Web dialog box, Photoshop Elements,
79-84, 137, 164, 188
Save Optimized As dialog box, Photoshop
Elements, 188
Save Style Sheet File As dialog box,
Dreamweaver, 119
Scale Styles check box, Image Size dialog box, 78
scanning image, 26
screen reader, 56
<script> tag, 128
Scripts folder, Dreamweaver, 262-263
search, Web site, 33
search engine optimization (SEO), 303-305
Search field, Commission Junction Get
Links page, 285
Search tool, Google, 33
Select File dialog box, Dreamweaver, 111,
195, 261
Select Image Source dialog box, Dreamweaver
background images, 116
banner images, 149
Business Template, 166
customizing images on Portfolio
home page, 147
images in Gallery templates, 151-152
Profile site images, 141
Selection Tool, Audacity, 251
_self target option, 111
SEO (search engine optimization), 303-305
server, Web, 96
service agreement, Commission Junction, 284
services
conference calls, free, 302
e-mail addresses, protecting, 301-302
e-mail newsletters, 298
favicons, 301
overview, 297
pop-up link previews, 300
PowerPoint presentations, sharing, 302
professional images, 299-300
selling, 275
sites for, 32
surveys, 301
traffic, measuring, 297-298
WhatTheFont, 300
72 ppi, 78
shopping cart system, 28, 44, 293
shortcut icon, 301
Show/Hide Kitchen Sink button, WordPress Add
New Post page, 237
Shutterfly Web site, 133
Site Definition dialog box, Dreamweaver
Advanced Tab, 97-99
Family Web Site template, 189-191
(continued)
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Site Definition dialog box, Dreamweaver (continued)
naming sites, 138, 145-146, 165
Remote Info category, 210-212
jite Definition dialog box, 98
f, 97-99
Size drop-down listVPage Properties
dialog box, 115
Skin option, Insert FLV dialog box, 269
SlideShare Web site, 302
SnapKast program, 249
Snap-shots online service, 300
social bookmarking site, 307
social networking site, 242, 306-307
software, cost of, 28
SolidCasts Web site, 255
Some text layers contain fonts that
are missing error message, 183
sound, Web site, 259
Soundbooth program, Adobe, 249
spam, 114, 299
special characters, in domain name, 37
special effects, 30
spell check, WordPress, 239
Split view, Dreamweaver, 48-49, 127
standards, Web site, 56
starter image template, 182-188
static Web site, 13, 14 ^H^^^^
stock image site, 175
streaming media, 44
structure, of Web design, 31
style, defining in Dreamweaver, 118-120
subject line, e-mail, 299
survey, 301
SurveyMonkey Web site, 301
. swf extension, 17
SWiSH Web site, 271
table, HTML, 51-52
tag
blog post, 238
HTML, 47
XTML, 49-50
tag selector, CSS, 60-61
tagline, blog, 233
target audience, 23
target option, Adobe Dreamweaver, 111
task list, 25-26
team, design, 29
template
blog, 230-235
business site, 155-158
creating site with, 10-13
Dreamweaver, 121-125, 171-174
family site, 179-181
gallery, 150-154
group site, 179-181
images, editing for, 159-164
images, sizing for, 159-164
images, starter, 182-188
portfolio, 131-133
profile, 130-131
types of, 16-18
Template files dialog box, Dreamweaver, 153
Templates folder, Family template, 181
testing
appearance on different browsers, 200
appearance on different computers, 198-199
designs before publishing, 122
dynamic Web sites, 14
FTP, setting up in Dreamweaver, 209-212
FTP features, Dreamweaver, 213-216
Google Analytics, 217-219
links, 154, 196, 207-208
in multiple browsers, 201-203
online browser emulators, 204-205
overview, 197-198
static Web pages, 14
text
Business Template, 168-169
digitalizing, 26
in Dreamweaver, 102-103
Text Color swatch box, Page Properties dialog
box, 115
Text tool, Photoshop Elements, 88-89, 92-93, 161
theme, WordPress, 230-231
This Document Only option, CSS Rule
dialog box, 63
threadless Web site, 8
three-clicks rule, 33
thumbnail image, Gallery template, 153-154
timeline, project plan, 26-27
title
blog, 233
page, 166, 191, 305
Toolbox, Photoshop Elements, 70-72
_top target option, 111
top-level domain, 39
trackback, 242
trademark, 37
Index 32/
traffic
buying, 305-306
measuring, 297-298
D r o ptetsfer •" 28
Transparency check box, Save for Web
dialog box, 83
Tweets, 309
Twitter, 309
Type tool, Photoshop Elements, 135, 183-184
TypePad software, 229
Underline Style drop-down list, Page Properties
dialog box, 117
Undo option, Photoshop Elements, 72
Uniform Resource Locator (URL), 35-36
Unix, 44
Update Links dialog box, Dreamweaver, 122
Update Template Files dialog box,
Dreamweaver, 125, 149, 195
updating
blogs by e-mail, 241
as promotion method, 307
Web sites, 15, 19
Upload link, YouTube, 273
Upload/Insert area, WordPress Add New Post
page, 237
URL (Uniform Resource Locator), 35-36
Use Case-Sensitive Link Checking check box,
Site Definition dialog box, 99
Use Firewall option, Site Definition
dialog box, 211
Use Passive FTP option, Site Definition
dialog box, 211
username, WordPress, 224
• </•
vacation site
creating pages, 192-196
designing for entire family, 189-191
family or group site templates, 179-181
linking pages, 192-196
overview, 179
starter image templates, 182-188
video
Business Template, adding to, 174
Flash, 264-270
formats, 258, 264-265
playing on Web, 257-259
Vimeo, 272-274
YouTube, 44, 272-274
viewing code, CSS, 65
Vimeo
overview, 44
uploading videos to, 272-274
viral marketing, 308-309
Visited Links option, Page Properties
dialog box, 117
visitor
accessibility of pages with CSS, 56
objectives, defining, regarding, 23
online surveys for, 301
Voice over Internet Protocol (VoIP), 245
volume, recording, 247
Web browser
function of, 50
previewing in multiple, 201-203
site appearance, effect on, 198, 200
testing site designs before publishing, 122
Web design. See also Cascading Style Sheets;
Hyper Text Markup Language; project plan;
specific programs by name
AP Divs, 53-54
consistency of, 30-31
dynamic pages, 14-15
home page, 31-32
links, 31, 32-33
main sections, 31-32
multimedia, 16
navigation, 31
options, 13-16
organization, 31
overview, 21, 29-30, 47
programs, 18-19
static pages, 14
structure, 31
templates, 16-18
XHTML, 47-50, 56-58
Web hosting
costs, 28
e-commerce service, 45
multiple sites with different domain
names, 45-46
overview, 42-43
registration services, 41
selecting, 43-44
Web Sites Do-It- Yourself For Dummies, 2nd Edition
Web server, 96
Web site. See also specific programs by name;
specific Web sites by name or type
image editing programs, 20
overview, 1-4, 7-8
successful examples of, 8-9
templates, 10-13, 16-18
Web design programs, 18-19
Web template, Dreamweaver, 171-174
Website Payments Standard page, PayPal, 289
Web-traffic services, online, 220
wedding Web site, 12
WhatTheFont software, 300
Whois database, 41
Whyville Web site, 42
widget, WordPress, 233-235
width, page, 170
Windows Media Video format, 258
word of mouth, as promotion method, 309-310
WordPress
Google Analytics code, adding to blog, 219
overview, 15, 223
posting to blog, 236-241
starting blog, 224-228
templates, 17, 230-235 ~^
work.html page, 157
writing style, for blog, 241
WS_FTP program, 216
www, in domain name, 37
K
Xenocode Browser Sandbox Web site, 204
XHTML (Extensible Hypertext Markup
Language)
combining with CSS, 56-57
overview, 47-50
page layouts, 57-58
v
Yahoo! e-commerce capability, 44
Yahoo! Merchant Solutions, 293
Yahoo! Web Analytics, 220
YouTube
Fred, 9
hosting video with, 44
uploading videos to, 272-274
Yuval David Web site, 155-156, 158
• Z:
Zoom tool, Photoshop Elements, 93
Drof^fcsyourself.
Easy.
Painting
WebSites
* how to:
i ii ii i i r
■m'H'^t
f Mtrli HmMrtMii
i. OiMcv*r
how to:
I
978-0-470-16903-2
,T YOUR'-
Plumbing
DUTIES
PX. Oi«ov«r
A how to:
978-0-470-17344-2
Web Stores
DUMMIES
CircuftbuiWIng
DUTIES
■Ml
Dinovcr
a how to:
Build Your Own PC
m how to;
978-0-470-17342-8
978-0-470-19611-3
FOR
Making everything easier! ™
D
-YOURSE
Create a presence
r)fQQr for your business, club,
or family on the Web!
You can do it! Put your business online, start selling products
through your Web site, or help plan your next college or
family reunion — this book shows you how it's easier than
ever to get online.
Combining step-by-step instructions with customizable
templates, you can create popular Web designs quickly,
even if youVe never set up a site before. If you're looking
for an easy way to update an old site, you'll find everything
you need to create a great new design.
Choose the template you like best, easily downloaded from
the book's companion Web site. Then discover how to use
Dreamweaver's template features to create new pages and
make changes to many pages at once. Add your text, images,
and even video, advertising, and e-commerce. It's all up to
you, because you can do it yourself!
w
mi
tn
m i
Hollywood Bar Secrets
Th* Sttftt Lit* oi j ffotlywiwd Garten <4*r
Open the book and find
• What to ask when choosing a
Web hosting service
• Design tips for creating
graphics in the best Web
formats
• Instructions for creating Web
pages in Dreamweaver®
• Great ways to add video with
YouTube® and e-commerce
with Google Checkout™
• How to promote your site
with social media, WordPress®
blogs, and podcasts
Janine Warner
is a best-selling author whose books and videos on Web design have won
her an international following and earned her speaking and consulting
engagements around the world. She runs a Web design and consulting firm
and offers tutorials, books, and training videos at www.DigitalFamily.com.
Making Everything Easier 1 .
ISBN T7fl-D-M7D-SbSED-^
5 2 4 9 9
TM
78
0470
56520
Go to Dummies.com®
for videos, step-by-step examples,
how-to articles, or to shop!
For Dummies®
A Branded Imprint of
W) WILEY
$24.99 US • $29.99 CAN • £17.99 UK
Internet/Web Site Design
Live Music Archive
Librivox Free Audio
Metropolitan Museum
Cleveland Museum of Art
Internet Arcade
Console Living Room
Books to Borrow
Open Library
TV News
Understanding 9/11